首页 > 编程语言 > 详细

Vue方法中修改数组某一项元素而不能响应式更新

时间:2019-07-01 23:03:18      阅读:203      评论:0      收藏:0      [点我收藏+]
<template>
  <div>
    <ul>
      <li v-for="(item, i) in ms" :key="i">{{item}}</li>
    </ul>
    <button @click="change()">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ms: [1, 2, 3]
    }
  },
  methods: {
    change () {
      this.ms[0] = 100
      console.log(this.ms)
    }
  },
  onLoad (params) {
    this.keyword = params.keyword
  }
}
</script>

  上面的代码想要实现点击按钮修改数组第一个元素的值。

  然而,实际运行后发现控制台打印的数据显示已经修改成功了,但是页面上的数据却没有更新(不是响应式的)。

  是什么原因导致的呢?我查了一下官方文档,文档中内容如下:

   技术分享图片

 

  文档中明确指出,vue不能检测上述数组的变动,同时文档中也指出了实现上述需求的方法:

  将 change() 函数中的代码 this.ms[0] = 100 改写为 this.set(this.ms, 0, 100)

 

  这样,修改数组中单个元素值的需求就实现了

 

Vue方法中修改数组某一项元素而不能响应式更新

原文:https://www.cnblogs.com/belongs-to-qinghua/p/11112613.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!