CODEWITHSUNDEEP
vue.jscomputed-properties
Lin Shen
Lin Shen

Reputation: 595

When v-for array created by computed option changs, the DOM doesn't change accordingly

Recently, I've encountered a problem that caused by the computed option of vuejs.

Firstly, I use v-for to loop for an array (soloColImgs) which is created by the computed option.

my HTML

  <div class="show-box" v-for="item in soloColImgs" track-by="$index">
                <img v-bind:src="item.imgUrl"/>
                <a v-bind:href="item.itemUrl" target="_blank"></a>
  </div>

my JS

   //...
   computed: {
   soloColImgs :function(){
           //....
    },

   methods: {
      change:function(){
              this.soloColImgs.pop();
           }
      }

Secondly, I change the array (soloColImgs) by using pop() or splice() etc...When I look into the console, the array can change accordingly, however, the DOM does't change at all. It would be greatful if anyone can help me out of this.

Upvotes: 0

Views: 186

Answers (1)

gurghet
gurghet

Reputation: 7707

The point of a computed property is that its determined solely by the function that defines it. You cannot change it directly, you must change it by acting on the dependencies. The dependencies are the properties that are used to calculate the returned value.

Upvotes: 1

Related Questions