1

我创建了一个数组，其中包含描述按钮信息的对象。在我的模板中，我有一个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);
   }
}

按钮数组在数据中初始化为一个空数组。当我的按钮数组更改时，视图会更新并显示正确数量的按钮，但active不会触发我的课程。

你有什么想法。

4

1 回答 1

1

Push 是一个包装的方法，因此它将触发视图更新。

您是否在 data 属性上声明了按钮？

data() {
     buttons:[]
}

由于您将 active 属性创建为 i === 0，因此您不需要 Vue.set。

我不知道是否有事可做，但不要让按钮为空然后按下，而是使用 aux 变量创建数组，然后执行 this.buttons = auxVariable。这应该会触发更新。

于 2018-11-17T23:13:25.263 回答