CODEWITHSUNDEEP
vue.js
major697
major697

Reputation: 1862

Vue show modal click using data from JSON

I have JSON

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

Next I used v-for to show data:

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

Method function:

showModal(showModal){
    showModal = !showModal;
}

But function showModal not change value from false to true. How I can change this value to show modal ?

Upvotes: 0

Views: 387

Answers (3)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

Tempalte:

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

Method:

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

Upvotes: 0

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

You have a typo in @clikc. Should be @click.

Upvotes: 0

mare96
mare96

Reputation: 3859

If you are loading from file you can try like this:

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

In your data initialize indexes: [] and go and see if your index in that array.

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

If you need to change data in your json you will need other procedure.

I think it was helpful. Good luck.

Upvotes: 3

Related Questions