[Vue] Generowanie komponenetów

Question

Witam,

W jaki sposób generować kilka razy ten sam komponent?

Obecnie sytuacja wygląda następująco: w kilku miejscach poprzez Vuex Store zmianiam wartość visible dla notyfikacji. Wewnątrz komponentu sprawdzam w computed czy wartość jest równa true, czy false. Wtedy w głównym elemencie daje v-if=[...].

Niestety w ten sposób generuje się tylko jeden komponent. Chciałbym jednak go generować kilkukrotnie. Jak do tego podejść?

 

Przykład: http://vue-notification.yev.io

Answer 1

Użyj while.

Comments

W komponencie, czy w App.vue, gdzie jest implementowany?

Plik komponentu: 

<template>
  <transition name="fade">
    <div 
    v-if="monit" 
    :class="['monit', `monit--${monit.type}`]"
    @click="onClose">
      {{ monit.message }}
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'Monit',
    computed: {
      monit () {
        console.log(this.$store.getters.monit)
        return this.$store.getters.monit
      },
    },
    created() {
      setTimeout(() => {
        this.$store.dispatch('clearMonit')        
      }, 2500);
    },
    methods: {
      onClose () {
        this.$store.dispatch('clearMonit')
      }
    }
  }
</script>

<style lang="scss" src="@/scss/components/_monit.scss"></style>

 

---

W pliku komponentu

---

Trochę nie rozumiem :p

Gdzie użyć while?

---

Tam gdzie ma zostać implementowana generacja

---

Tzn. obecnie przechowuje tylko jeden obiekt z danymi do wyświetlania. Co ma być zatem argumentem while?