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

我正在使用Vue。我为我的测试用例创建了MultiAccordion组件。我想按状态[索引]标志打开幻灯片。但这个组件不起作用。为什么这不起作用

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>
    `,
};

，即以下情况不是反应性的：

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

您必须使用Vue.set：

或使用拼接：

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

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