具有数组的Vue计算属性未更新

时间:2018-07-21 10:16:17

标签: javascript vue.js

我有一个非常简单的数组属性,在更新时不会改变计算属性 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作为道具不是。

2 个答案:

答案 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 }}