Vue make each v-for have own version of variable-CodePudding

i am looping through an array displaying songs I have uploaded into firebase. I am giving the user a button to edit the name of the song if they press the edit button. When button is pressed it show to edit details, however, except of only the one object expanding all of them expand to edit. How can I give each object its own version of the showForm Bool thanks.

Displaying songs:

<div v-for="song in watchSongs" :key="song.docID">
            <div >
                <p >{{song.modifiedName}}</p>
                <img @click.prevent="showForm = !showForm" src="@/assets/edit.png" alt="" >
                <img src="@/assets/close2.png" alt="" >
            <div v-if="this.showForm" >
                <p>song title</p>
                <input type="text" placeholder="Enter Song Title" >
                <p>Genre</p>
                <input type="text" placeholder="Enter genre" >
                <div >
                    <button >Submit</button>
                    <button >Go back</button>
                </div>
            </div>
        </div>

The data:

export default {
name:"AppUploadDetails",
props: ['songs'],
data(){
    return{
        showForm:false,
    }
},
computed:{
    watchSongs(){
        return this.songs;
    }
}

}

CodePudding user response：

Fixed by changed the v-if to v-if="song.showForm" and the click to @click.prevent="song.showForm"

CodePudding user response：

Use an object to store your loop items, with the key being the docID.

Something like this:

showForm: {}
click.prevent="showForm[song.docID] = !showForm[song.docID]