我有一个非常简单的数组属性,在更新时不会改变计算属性 jsfidle链接:https://jsfiddle.net/fx1v4ze6/30/
Vue.component('test', {
data: function() {
return {
arr: this.myarray.slice()
}
},
props:['myarray','secondprop'],
template:'#arraybug',
methods:{
add:function(){
this.myarray.push(1);
this.secondprop+=1;
this.arr.push(1);
}
},
computed:{
mycomputed: function(){
return this.arr.length;
},
mycomputed2: function(){
return this.secondprop;
},
mycomputed3: function(){
return this.myarray.length;
},
}
});
var test = new Vue({
el:"#test"});
HTML:
<div id="test">
<test :myarray="[1,2,3]" :secondprop="1"></test>
</div>
<template id="arraybug">
<div >
<button v-on:click="add()">
click
</button>
{{mycomputed}} - {{mycomputed2}} - {{mycomputed3}}
</div>
</template>
我希望,由于mycomputed基于myarray,因此myarray的任何更改都将导致计算值进行更新。我错过了什么?
我已经更新了实例-使用secondprop的mycomputed2已正确更新(针对数字)。但是myarray作为道具不是。
答案 0 :(得分:3)
道具不活跃。使用数据:
Vue.component('test', {
props:['myarray'],
data: function() {
return {
arr: this.myarray.slice()
}
},
template:'#arraybug',
methods:{
add:function(){
this.arr.push(1);
}
},
computed:{
mycomputed: function(){
let newLen = this.arr.length;
return newLen;
}
}
});
var test = new Vue({
el:"#test"});
我将props数组复制到了数据。
答案 1 :(得分:0)
Vue无法检测到此处提到的数组的内部变化:https://vuejs.org/v2/guide/reactivity.html
或者,如果将数组用作道具,则在道具传递到的组件中,您可以添加数据字段,并使用方法(而非计算的)和观察程序,如此处的示例所示:{{3 }}