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

Question

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.

Answer 1

计算属性的关键在于它仅由定义它的函数确定。您不能直接更改它，您必须通过对依赖项进行操作来更改它。依赖项是用于计算返回值的属性。