Vue.js - 更新的数组项值不会在页面中更新 [英] Vue.js - updated array item value doesn't update in page
本文介绍了Vue.js - 更新的数组项值不会在页面中更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
"test" 是我的 vue 数据中的一个对象数组
"test" is an array of object in my vue data
var vue = new Vue({
el: '#content',
data: {
test: [
{
array: [0, 0, 0, 0]
},
{
array: [0, 0, 0, 0]
}
],
number: 0
},
methods: {
setNumber: function(){
this.number = 5;
},
setArray: function(){
this.test[0].array[0] = 9;
}
}
})
问题是,如果我更改了数组"中元素的值,而日志显示该值已更改,则它不会在页面上更新.另一方面,如果我更改数字"的值,页面上的数字"和数组"值都会更新.
Problem is that if i change the value of an element in "array", while log shows that the value has changed, it doesn't update on the page. On the other hand, if i change value of "number", both "number" and "array" value on the page are updated.
<section id="content">
<div>Value in array: {{ test[0].array[0] }}</div>
<div>Value in number: {{ number }}</div>
<!-- {{ setNumber() }} -->
{{ setArray() }}
</section>
<!-- Loading Vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
如何使我的页面响应数组"更新?
这是 JsFiddle:https://jsfiddle.net/zcbh4esr/
How can i make my page responsive to "array" update?
Here's the JsFiddle: https://jsfiddle.net/zcbh4esr/
推荐答案
这是由于 阵列更改注意事项.
改成这样
var vue = new Vue({
el: '#content',
data: {
test: [{
array: [0, 0, 0, 0]
}, {
array: [0, 0, 0, 0]
}],
number: 0
},
methods: {
setNumber: function() {
this.number = 5;
console.log(this.number);
},
setArray: function() {
//this.test[0].array[0] = 9;
this.$set(this.test[0].array, 0, 9);
console.log(this.test[0].array[0]);
}
}
});
这是小提琴
这篇关于Vue.js - 更新的数组项值不会在页面中更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文