[Vuejs]-Vue show modal click using data from JSON

3๐Ÿ‘

โœ…

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.

๐Ÿ‘คmare96

0๐Ÿ‘

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

0๐Ÿ‘

Tempalte:

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

Method:

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

Leave a comment