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

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

1 个答案: