vue3 v-for

@고유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