gpt4 book ai didi

javascript - Vue.js - 我的多 Accordion 菜单组件无法通过切换标志工作

转载 作者:行者123 更新时间:2023-12-03 00:36:49 25 4
gpt4 key购买 nike

我正在使用Vue.我为我的测试用例创建了 MultiAccordion 组件。我想通过 status[index] 标志打开幻灯片。但这个组件不起作用。为什么这不起作用?

var MultiAccordion = {
data: function() {
return {
items: [
'cat',
'dog',
'bird',
],
status: [],
};
},
created: function() {
for (let i = 0; i < this.items.length; ++i) {
this.status.push(false);
}
},
methods: {
handleToggle: function(index) {
this.status[index] = !this.status[index];
},
},
template: `
<ul>
<li v-for="(val, index) in items">
<button @click="handleToggle(index)">toggle</button>
<div v-if="status[index]">
{{ val }}
</div>
</li>
</ul>
`,
};

最佳答案

Due to limitations in JavaScript, Vue can not detect changes to an array when you assign value by index ,即以下内容不是响应式(Reactive)的:

this.status[index] = !this.status[index];

您必须使用Vue.set:

this.$set(this.status, index, !this.status[index])

或者使用拼接:

this.status.splice(index, 1, !this.status[index])

关于javascript - Vue.js - 我的多 Accordion 菜单组件无法通过切换标志工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53624232/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com