<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)
这样，修改数组中单个元素值的需求就实现了
原文：https://www.cnblogs.com/belongs-to-qinghua/p/11112613.html