代码拉取完成,页面将自动刷新
同步操作将从 陌溪/LearningNotes 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
我们在实际开发中,经常要对数组进行操作,最为常见的方法就是直接对数组中的某个元素进行赋值,比如下面这样的:
<script>
export default {
data() {
return {
comments: [],
isReply: [0, 0, 0, 0, 0]
};
},
methods: {
replyTo: function (index) {
console.log(this.isReply);
isReply[index] = 1
console.log(this.isReply);
}
},
};
</script>
但是虽然数组中的元素改变了,但是vue却不能监听到变化,同时我们引入watch来检测也是没有效果,如下所示
<script>
export default {
data() {
return {
comments: [],
isReply: [0, 0, 0, 0, 0]
};
},
watch: {
isReply: {
handler(val, oldval) {
},
deep: true
}
},
methods: {
replyTo: function (index) {
console.log(this.isReply);
isReply[index] = 1
console.log(this.isReply);
}
},
};
</script>
从上述例子,我们发现vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
具体案例如下
<script>
import Comment from '../components/Comment'
export default {
data() {
return {
comments: [],
isReply: [0, 0, 0, 0, 0]
};
},
watch: {
},
components: {
Comment
},
methods: {
replyTo: function (index) {
// 最后一个参数为我们需要改变的值
this.isReply.splice(index, 1, 1);
this.$set(this.isReply, index, 1);
}
},
};
</script>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。