Как сделать вывод успешного сообщения во Vue?

Question

[Alex_87]

Всем привет! В одном компоненте находится разметка сразу двух сообщении. У нас два метода на двух кнопках. В зависимости от того, на какую кнопку нажали - то сообщение и выводиться.
Как написать методы так, чтобы при клике, сообщения собирались и списком выводились?

<template>
  <div class="toasts">
    
    
        <div class="toast toast_success" >
          <ui-icon class="toast__icon" icon="check-circle" />
          <span>Success Toast Example</span>
        </div>

        <div class="toast toast_error">
          <ui-icon class="toast__icon" icon="alert-circle" />
          <span>Error Toast Example</span>
        </div>
    
   
  </div>
</template>

Comments

[WapSter]

массивы, v-for, push. Неделя тупых вопросов

[Alex_87]

WapSter, хорошо, происходит клик по кнопке, что пушить будете?

[WapSter]

Alex_87, объект который содержит само сообщение, тип и полезную нагрузку которая сообщит блоку когда исчезать. И точно не буду городить два идентичных блока в тимплейте

Answer 1

[madismad]

создать список сообщений (например, в сторе) в виде объектов, с сообщением и типом(success и error), и через v-for + v-if отображать их. Не забудь убирать сообщения через setTimeout