vue修改数据页面不重新渲染

阿挪呐~

已于 2023-05-29 16:11:44 修改

阅读量173

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-29 16:10:41 首次发布

本文链接：https://blog.csdn.net/qq_28840533/article/details/130930274

版权

<template>
  <div id="app">
    <button @click="change">修改</button>
    <ol>
      <li v-for="(item, index) in arr" :key="index">{{ item.name }}</li>
    </ol>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        { name: '小填', age: 21 },
        { name: '小刚', age: 21 }
      ]
    }
  },
  mounted () {
    this.arr[2] = { name: '小刚', age: 23 } // 数组的值发生了变化 但视图没有更改
    console.log(this.arr)
  },
  methods: {
    change() {
      this.$set(this.arr, 2, { name: '小名', age: 23 }) // $set 触发视图更改
    }
  }
}
</script>