how to change value of v-if condition of current item in loop (on click) - vue.js

Question

In my Vue.js app, I have a list of contacts in a v-for loop, each with a corresponding 'edit' button; I want to toggle the v-if="="!isEditingContact" condition for only the selected contact. I have the index of the button/contact to be edited, but I don't know how to toggle the 'isEditingContact' condition for the selected contact.
My component:
<template>
<div class="container" id="project-edit">
<section class="client-data">
<!-- show static if editMode FALSE -->
<dl v-if="!isEditingClient">
<!-- SNIP-->
</dl>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="isEditingClient">
<!-- SNIP -->
</fieldset>
<div class="buttons">
<button v-if=!isEditingClient id="edit-client" v-on:click="editMode">edit</button>
<button v-if=isEditingClient v-on:click="cancelEdit">cancel</button>
<button v-if=isEditingClient v-on:click="post">save changes</button>
</div>
</section><!-- END .client-data -->
<section class="gig-data">
<!-- show static if editMode FALSE -->
<dl v-if="!isEditingGig">
<!-- SNIP-->
</dl>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="isEditingGig">
<!-- SNIP-->
</fieldset>
<div class="buttons">
<button v-if=!isEditingGig id="edit-gig" v-on:click="editMode">edit</button>
<button v-if=isEditingGig v-on:click="cancelEdit">cancel</button>
<button v-if=isEditingGig v-on:click="post">save changes</button>
</div>
</section><!-- END .gig-data -->
<section class="contacts-wrapper">
<!-- show static if editMode FALSE -->
<dl>
<dt>contacts:</dt>
<dd>
<ul class="contacts">
<li v-if="!isEditingContact" v-for="(contact, ix) in project.contacts" v-bind:key="??">
{{ contact.name }}<br />
{{ contact.title }}<br />
{{ contact.email }}<br />
{{ contact.phone }}
<div class="buttons">
<button v-if=!isEditingContact id="edit-contact" v-on:click="editContact(contact, ix)">edit</button>
<button v-if=isEditingContact v-on:click="cancelEdit">cancel</button>
<button v-if=isEditingContact v-on:click="post">save changes</button>
</div>
</li>
</ul>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="isEditingContact">
<!--
SNIP:
FORM TO BE DISPLAYED IN PLACE OF THE SELECTED CONTACT,
AND W/OUT HIDING OTHER CONTACTS
-->
</fieldset>
</dd>
</dl>
</section>
</div>
</template>
<script>
export default {
props: [ "projectID" ],
components: {
},
data () {
return {
id: this.$route.params.id,
title: "Edit Project",
subtitle: "ID: " + this.$route.params.id,
project: {},
contactInfo: {},
workLocation: true,
submitted: false,
isEditingClient: false,
isEditingGig: false,
isEditingContact: false
}
}, // data
created: function() {
this.$http.get("https://xyz.dataworld.com/projects/" + this.id + ".json")
.then(function(data) {
return data.json();
}).then(function(data) {
this.project = data;
})
}, // created
methods: {
addContactInfo: function(e) {
e.preventDefault();
this.projectID = this.id;
this.project.contacts.push(this.contactInfo);
this.contactInfo = {};
},
editMode: function(e) {
const buttonID = e.currentTarget.id;
switch (buttonID) {
case "edit-client":
this.isEditingClient = !this.isEditingClient;
break;
case "edit-gig":
this.isEditingGig = !this.isEditingGig;
break;
// case "edit-contact": ... this is uselesss, since it would hide all contacts as it shows the form
// this.isEditingContact = !this.isEditingContact;
// break;
default:
}
},
editContact: function(e) {
},
cancelEdit: function() {
this.isEditingClient = false;
this.isEditingGig = false;
this.isEditingContacts = false;
},
post: function() {
console.log(this.project);
this.$http.post("https://sr-giglog.firebaseio.com/projects.json", this.project)
.then(function(data){
this.submitted = true;
}
)} // post function
} // methods
}
</script>

Answer 1

Most commonly this is done by adding a flag to the individual objects in your list. In this case, an editing flag, or whatever you want to call it. You would initialize it with false. You can add this flag either server side or client side. If you want to do it client side it would look something like this:
this.$http.get("https://xyz.dataworld.com/projects/" + this.id + ".json")
.then(data => data.json())
.then(data => {
// add the editing property
for (let contact of data.contacts)
this.$set(contact, 'editing', false)
this.project = data
})
Then, use that property in your template.
<section class="contacts-wrapper">
<!-- show static if editMode FALSE -->
<dl>
<dt>contacts:</dt>
<dd>
<ul class="contacts">
<li v-if="!contact.editing" v-for="(contact, ix) in project.contacts" v-bind:key="??">
{{ contact.name }}<br />
{{ contact.title }}<br />
{{ contact.email }}<br />
{{ contact.phone }}
<div class="buttons">
<button v-if="!contact.editing" id="edit-contact" v-on:click="contact.editing = true">edit</button>
<button v-if="contact.editing" v-on:click="contact.editing = false">cancel</button>
<button v-if="contact.editing" v-on:click="post">save changes</button>
</div>
</li>
</ul>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="contact.edting">
...
</fieldset>
</dd>
</dl>
</section>

Answer 2

You can store editing contact's id and check that inside v-if.
If you stored the id of contact that is being edited in editingContactId then you can modify your code to this:
<ul class="contacts">
<li v-for="(contact, ix) in project.contacts" v-bind:key="??">
{{ contact.name }}<br />
{{ contact.title }}<br />
{{ contact.email }}<br />
{{ contact.phone }}
<div class="buttons">
<button v-if="editingContactId!=contact.id" id="edit-contact" v-on:click="editContact(contact, ix)">edit</button>
<button v-if="editingContactId==contact.id" v-on:click="cancelEdit">cancel</button>
<button v-if="editingContactId==contact.id" v-on:click="post">save changes</button>
</div>
</li>
</ul>

Answer 3

If it helps anyone, here's my revised, working solution (at least this reflects specifically what I was asking to achieve in my OP):
My component:
<template>
<div class="container" id="project-edit">
<section class="client-data">
<!-- show static if editMode FALSE -->
<dl v-if="!isEditingClient">
<!-- SNIP-->
</dl>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="isEditingClient">
<!-- SNIP -->
</fieldset>
<div class="buttons">
<button v-if=!isEditingClient id="edit-client" v-on:click="editMode">edit</button>
<button v-if=isEditingClient v-on:click="cancelEdit">cancel</button>
<button v-if=isEditingClient v-on:click="post">save changes</button>
</div>
</section><!-- END .client-data -->
<section class="gig-data">
<!-- show static if editMode FALSE -->
<dl v-if="!isEditingGig">
<!-- SNIP-->
</dl>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="isEditingGig">
<!-- SNIP-->
</fieldset>
<div class="buttons">
<button v-if=!isEditingGig id="edit-gig" v-on:click="editMode">edit</button>
<button v-if=isEditingGig v-on:click="cancelEdit">cancel</button>
<button v-if=isEditingGig v-on:click="post">save changes</button>
</div>
</section><!-- END .gig-data -->
<section class="contacts-wrapper">
<!-- show static if editMode FALSE -->
<dl>
<dt>contacts:</dt>
<dd>
<li v-for="(contact, ix) in project.contacts">
<!-- show orig data if editMode FALSE -->
<div v-if="!contact.editingContact">
{{ contact.name }} ({{ ix }})<br />
{{ contact.title }}<br />
{{ contact.email }}<br />
{{ contact.phone }}
<div class="buttons">
<button v-if=!contact.editingContact id="edit-contact" v-on:click="contact.editingContact = true">edit</button>
</div>
</div>
<!-- show FORM if editMode TRUE -->
<fieldset v-if="contact.editingContact">
<!-- SNIP: FORM ... -->
<div class="buttons">
<!-- I realize that the v-if attributes are not necessary here -->
<button v-if=contact.editingContact v-on:click="contact.editingContact = false">cancel</button>
<button v-if=contact.editingContact v-on:click="post">save changes</button>
</div>
</fieldset>
</li>
</dd>
</dl>
</section>
</div>
</template>
<script>
export default {
props: [ "projectID" ],
components: {
},
data () {
return {
id: this.$route.params.id,
title: "Edit Project",
subtitle: "ID: " + this.$route.params.id,
project: {},
contactInfo: {},
workLocation: true,
submitted: false,
isEditingClient: false,
isEditingGig: false,
}
}, // data
created: function() {
this.$http.get("https://xyz.dataworld.com/projects/" + this.id + ".json")
.then(data => data.json())
.then(data => {
for (let contact of data.contacts) {
this.$set(contact, 'editingContact', false)
}
this.project = data;
})
}, // created
methods: {
addContactInfo: function(e) {
e.preventDefault();
this.projectID = this.id;
this.project.contacts.push(this.contactInfo);
this.contactInfo = {};
},
editMode: function(e) {
const buttonID = e.currentTarget.id;
switch (buttonID) {
case "edit-client":
this.isEditingClient = !this.isEditingClient;
break;
case "edit-gig":
this.isEditingGig = !this.isEditingGig;
break;
default:
}
},
editContact: function(e) {
},
cancelEdit: function() {
this.isEditingClient = false;
this.isEditingGig = false;
},
post: function() {
console.log(this.project);
this.$http.post("https://sr-giglog.firebaseio.com/projects.json", this.project)
.then(function(data){
this.submitted = true;
}
)} // post function
} // methods
}
</script>
Now, if you'd all just stand by while I prepare my next twelve questions ...