Vue computed property with an array not updating

Question

I have this very simple case of an array property, which when updated doesn't make a computed property change jsfidle link: 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>

I would expect, since mycomputed is based on myarray, that any change to myarray will cause computed to update. What I have missed?

I've updated my exaple - mycomputed2 with secondprop is updated properly (for number). But myarray as a prop not.

Axel · Accepted Answer · 2018-07-21 12:11:42Z

6

Props are not Reactive. Use data:

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"});

I'm copied props array to data.

edited Jul 21, 2018 at 12:11

Axel

5,26119 gold badges80 silver badges152 bronze badges

answered Jul 21, 2018 at 10:25

Vladimir Proskurin

3911 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

maque Over a year ago

Hi, thank you. Your example works, but please take a look at my edited changes. "secondprop" which is prop, is updated (number value) so why array doesn't behave same way?

Vladimir Proskurin Over a year ago

It is not recommended to do so. Look at the console output

VM38 vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "secondprop"

tony19 · Accepted Answer · 2022-07-15 00:32:15Z

1

Vue can't detect the internal change of an array as mentioned here: https://v2.vuejs.org/v2/guide/reactivity.html

Alternatively, if an array is used as a prop, in the component the prop is passed to, you can add a data field, and use methods (instead of computed) and watchers as shown in the example here: https://v2.vuejs.org/v2/guide/computed.html#Watchers

edited Jul 15, 2022 at 0:32

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 7, 2020 at 20:03

Ken H

6719 silver badges8 bronze badges

1 Comment

Jamie Marshall Over a year ago

This is no longer true in vue3: [vuejs.org/guide/essentials/…

Collectives™ on Stack Overflow

Vue computed property with an array not updating

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related