컴포넌트 instance 를 런타임에서 추가 또는 제거하기 : v-for 와 데이터

Vue 에서 개발할때는 언제나 데이터 중심으로 사고하여야한다.

DOM 을 직접적으로 컨트롤할 생각을 하는게 아니라,

데이터가 변경되면 DOM 을 Vue 가 랜더링해주기때문이다.

따라서 데이터를 추가하거나, 제거하고,

v-for 를 이용해, 현재 데이터를 랜더링하는쪽으로 코드를 짜야한다.

---

< 예제 >

<!-- Child.vue -->

<template>
    
    <li>{{Math.random()}}</li>

</template>

<!-- App.vue -->

<template>
  
  <button @mousedown="add">add</button>
  <button @mousedown="remove">remove</button>

  <Child

    v-for ="i in childAmount" 
    :key  ="i"

  />

</template>

<script>

  import Child from './Child.vue'
  import { ref } from 'vue'

  export default {
    
    setup() {

      const childAmount = ref(1)

      function add()    { childAmount.value++ }
      function remove() { if (childAmount.value > 1) childAmount.value-- }

      return { Child, childAmount, add, remove }

    }

  }

</script>

---

< 예제 w Vuex >

 

/* store.js */

import { createStore } from 'vuex'

const state = {

    childAmount : 0

}

const mutations = {

    add(state)       { state.childAmount++ },
    remove(state)    { if (state.childAmount > 0) state.childAmount-- }

}

const store = createStore({ 
    
    state : state,
    mutations : mutations

})

export default store

/* main.js */

import { createApp } from 'vue'
import store from './store/store.js'
import App from './components/App.vue'

const app = createApp(App)

app.use(store)
app.mount('#app')

<!-- Child.vue -->

<template>
    
    <li>{{Math.random()}}</li>

</template>

<!-- App.vue -->

<template>
  
  <button @mousedown="store.commit('add')">add</button>
  <button @mousedown="store.commit('remove')">remove</button>

  <Child

    v-for ="i in store.state.childAmount" 
    :key  ="i"

  />

</template>

<script>

  import { useStore } from 'vuex'
  import Child from './Child.vue'

  export default {
    
    setup() {

      const store = useStore()

      return { Child, store }

    }

  }

</script>