我创建了一个数组,其中包含描述按钮信息的对象。在我的模板中,我有一个 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);
}
}
按钮数组在数据中初始化为一个空数组。
当我的按钮数组发生变化时, View 会更新并显示正确数量的按钮,但不会触发我的类 active
。
你有什么想法吗?
最佳答案
Push 是一个包装方法,因此它会触发 View 更新。
您是否在数据属性上声明了按钮?
data() {
buttons:[]
}
由于您正在创建 active 属性为 i === 0,因此您不需要 Vue.set。
我不知道是否需要做些什么,但不是让按钮为空然后按下,而是使用 aux 变量创建数组,然后只执行 this.buttons = auxVariable。这应该会触发更新。
关于javascript - Vue.js 推送不更新 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53356344/