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

Question

我正在使用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>
    `,
};

Answer 1

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])