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

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，即以下不是被动的：

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

你要么必须使用Vue.set：

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

或者使用splice：

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