vue循环数组，修改数组里面某个字段后页，不能实时刷新数据

一、vue循环数组，修改数组里面某个字段后页，不能实时刷新数据

1、使用$ set、$forceUpdate方法

① 调用方法：this.$set( target, key, value )

• target：要更改的数据源(可以是对象或者数组)
• key：要更改的具体数据
• value ：重新赋的值

<template>
  <div>
    <button @click="edit">修改某个字段</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        名字：{{ item.name }} 年龄：{{ item.age }}爱好：{{ item.hobby }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: '春天', age: 21, hobby: ['唱歌', '跳舞'] },
        { name: '夏天', age: 11, hobby: ['游戏', '打豆豆'] }
      ]
    }
  },
  methods: {
    edit() {
      // this.arr[1].hobby[0] = '吃饭' // 直接修改爱好不生效
      this.$set(this.arr[1], 'hobby', ['游戏', '打豆豆', '吃饭']) // $set 触发视图更改
    }
  }
}
</script>

2、使用数组api

例：push()，pop()，shift()，splice()，sort()，reverse()

<template>
  <div>
    <button @click="edit">修改某个字段</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        名字：{{ item.name }} 年龄：{{ item.age }}爱好：{{ item.hobby }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: '春天', age: 21, hobby: ['唱歌', '跳舞'] },
        { name: '夏天', age: 11, hobby: ['游戏', '打豆豆'] }
      ]
    }
  },
  methods: {
    edit() {
      // this.arr[1].hobby[0] = '吃饭' // 直接修改爱好不生效
      this.arr[1].hobby.push('吃饭')
    }
  }
}
</script>

3、使用深拷贝的形式复制数组，然后修改数组的内容

使用理由：因为有时候数组嵌套太深、导致无法监听到数组里面的字段发生变化

<template>
  <div>
    <button @click="edit">修改某个字段</button>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        名字：{{ item.name }} 年龄：{{ item.age }}爱好：{{ item.hobby }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: '春天', age: 21, hobby: ['唱歌', '跳舞'] },
        { name: '夏天', age: 11, hobby: ['游戏', '打豆豆'] }
      ]
    }
  },
  methods: {
    edit() {
      let arrCopy = JSON.parse(JSON.stringify(this.arr))
      // this.arr[1].hobby[0] = '吃饭' // 直接修改爱好不生效
      arrCopy[1].hobby[0] = '吃饭'
      this.arr = arrCopy
    }
  }
}
</script>