Vue.js 推送不更新視圖

Question

我創建了一個數組，其中包含描述按鈕信息的對象。 在我的模板中，我有一個 class active ，它代表活動按鈕。 默認情況下，數組的第一個按鈕是活動的。

模板：

<b-button-group class="page-buttons mt-2" size="sm">
   <b-button v-for="btn in buttons" 
      :key="btn.key" 
      @click="selectPage(btn.key)"
      v-bind:class="{'active': btn.active}">{{ btn.caption }}
   </b-button>
 </b-button-group>

腳本：

methods: {
    $createPaginationButtons: function(numberParameters) {
      const numberPages = Math.ceil(numberParameters / NUMBER_ELEMENT_PER_PAGE);
      this.buttons = [];

      for (let i = 0; i < numberPages; i++) {
        this.buttons.push({
          caption: `PAGE ${i + 1}`,
          active: (i === 0),
          key: (i + 1)
        });
      }

      Vue.set(this.buttons[0], 'active', true);
   }
}

按鈕數組在數據中初始化為空數組。 當我的按鈕數組發生變化時，視圖會更新並顯示正確數量的按鈕，但不會觸發我的 class active 。

你有什么想法嗎？

Answer 1

Push 是一種包裝方法，因此它會觸發視圖更新。

您是否在數據屬性上聲明了按鈕？

data() {
     buttons:[]
}

由於您正在創建 active 屬性為 i === 0，因此您不需要 Vue.set。

我不知道是否有什么可做的，但不是讓按鈕為空然后按下，而是使用 aux 變量創建數組然后只做 this.buttons = auxVariable。 這應該觸發更新。