reactive wrapper array

content:

reactive is a function used to wrap common objects/arrays into responsive data.

real column

 

<template>
  <ul>
    <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
      {
   
   { item }}
    </li>
  </ul>
</template>

<script>
  export default {
    name: 'App',
    setup() {
      const arr = ['a', 'b', 'c']
      const removeItem = (index) => {
        arr.splice(index, 1)
      }
      return {
        arr,
        removeItem
      }
    }
  }
</script>

The missing data is deleted, but the attempt is not updated, it is not responsive!

So you can wrap the array with reactive

<template>
  <ul>
    <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">
      {
   
   { item }}
    </li>
  </ul>
</template>

<script>
  import { reactive } from 'vue'
  export default {
    name: 'App',
    setup() {
      const arr = reactive(['a', 'b', 'c'])
      const removeItem = (index) => {
        arr.splice(index, 1)
      }
      return {
        arr,
        removeItem
      }
    }
  }
</script>