Question

我有JSON

"8":{
    "name": "Dog",
    "age": 2,
    "showModal": false
},
"9":{
    "name": "Cat",
    "age": 7,
    "showModal": false
},

接下来，我使用v-for显示数据：

<div v-for="(animal, index) in animals" :key="index">
    <div>{{ animal.name }}</div> // Dog
    <div>{{ animal.showModal }}</div> // false
    <div @click="showModal(animal.showModal)">Show modal</div>

    <div v-show="animal.showModal">modal...</div>
</div>

方法功能：

showModal(showModal){
    showModal = !showModal;
}

但是函数showModal不能将值从false更改为true。如何更改此值以显示模式？

Answer 1

如果要从文件加载，则可以这样尝试：

<div v-for="(animal, index) in animals" :key="index">
    <div>{{ animal.name }}</div> // Dog
    <div>{{ animal.showModal }}</div> // false
    <div @click="showModal(index)">Show modal</div>

    <div v-if="isItemClicked(index)">modal...</div>
</div>

在数据中初始化indexes: []，然后查看索引是否在该数组中。

methods: {
    showModal(index) {
        this.indexes.push(index);
    },
    isItemClicked(index) {
        let test = false;
        this.indexes.forEach(i => {
            if (i === index) {
               test = true;
               break;
            }
        })
        return test;
    }
}

如果您需要更改json中的数据，则需要其他过程。

我认为这很有帮助。祝你好运。

Answer 2

您在@clikc中有一个错字。应该是@click。

Answer 3

Tempalte：

<div @click="showModal(animal)">Show modal</div>。

方法：

showModal(animal) {
    animal.showModal = true;
}

Vue使用JSON数据显示模式点击

3 个答案: