본문 바로가기
Frontend/Vue 2

vue3 v-for

by SOLYI 2021. 10. 18.


@고유id를 만들때 사용
npm i -D shortid
shortid.generate()

<template>
  <button @click="handler">
    추가
  </button>
  <ul>
    <li
      v-for="{id, name} in newFruits"
      :key="id">
      {{ name }} - {{ id }}
    </li>
  </ul>
</template>

<script>
import shortid from 'shortid'
export default {
  data(){
    return{
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ],
    }
  },
  computed:{
    newFruits(){
      return this.fruits.map(fruit =>({
        id: shortid.generate(),
        name: fruit
      }))
    }
  },
  methods:{
    handler(){
      this.fruits.push('orange')
    }
  }
}
</script>


//변이 methods
push, pop, shift, unshift, slice, sort, reverse

//비-변이 methods
filter, concat, slice

 

 

반응형

'Frontend > Vue 2' 카테고리의 다른 글

vue3 이벤트 수식어 stop prevent capture self once passive  (0) 2021.10.18
vue3 event handler  (0) 2021.10.18
vue3 v-if / v-show  (0) 2021.10.18
vue3 v-if / v-else-if / v-else  (0) 2021.10.18
vue3 클래스, 스타일 바인딩  (0) 2021.10.18