我创建了一个数组,其中包含描述按钮信息的对象。在我的模板中,我有一个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);
}
}
buttons数组在data中初始化为空数组。当我的buttons数组发生变化时,视图会更新并显示正确数量的按钮,但我的类active
没有被触发。
你有什么想法。
1条答案
按热度按时间4c8rllxm1#
推送是一个 Package 的方法,因此它将触发视图更新。
是否已在data属性上声明按钮?
由于您正在创建活动属性i === 0,因此不需要Vue.set。
我不知道是否有什么关系,但不是让按钮为空,然后按下,而是使用一个辅助变量来创建数组,然后这样做。buttons = auxVariable。这应该会触发一个更新。