title: how to change value of v-if condition of current item in loop (on click)
body: <p>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.</p>
  
  <p>My component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container" id="project-edit"&gt;
          &lt;section class="client-data"&gt;
              &lt;!-- show static if editMode FALSE --&gt;
              &lt;dl v-if="!isEditingClient"&gt;
              &lt;!-- SNIP--&gt;
              &lt;/dl&gt;
              &lt;!-- show FORM if editMode TRUE --&gt;
              &lt;fieldset v-if="isEditingClient"&gt;
              &lt;!-- SNIP --&gt;
              &lt;/fieldset&gt;
              &lt;div class="buttons"&gt;
                  &lt;button v-if=!isEditingClient id="edit-client" v-on:click="editMode"&gt;edit&lt;/button&gt;
                  &lt;button v-if=isEditingClient v-on:click="cancelEdit"&gt;cancel&lt;/button&gt;
                  &lt;button v-if=isEditingClient v-on:click="post"&gt;save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/section&gt;&lt;!-- END .client-data --&gt;
  
          &lt;section class="gig-data"&gt;
              &lt;!-- show static if editMode FALSE --&gt;
              &lt;dl v-if="!isEditingGig"&gt;
              &lt;!-- SNIP--&gt;
              &lt;/dl&gt;
  
              &lt;!-- show FORM if editMode TRUE --&gt;
              &lt;fieldset v-if="isEditingGig"&gt;
              &lt;!-- SNIP--&gt;
              &lt;/fieldset&gt;
              &lt;div class="buttons"&gt;
                  &lt;button v-if=!isEditingGig id="edit-gig" v-on:click="editMode"&gt;edit&lt;/button&gt;
                  &lt;button v-if=isEditingGig v-on:click="cancelEdit"&gt;cancel&lt;/button&gt;
                  &lt;button v-if=isEditingGig v-on:click="post"&gt;save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/section&gt;&lt;!-- END .gig-data --&gt;
  
          &lt;section class="contacts-wrapper"&gt;
              &lt;!-- show static if editMode FALSE --&gt;
              &lt;dl&gt;
                  &lt;dt&gt;contacts:&lt;/dt&gt;
                  &lt;dd&gt;
                      &lt;ul class="contacts"&gt;
                          &lt;li v-if="!isEditingContact" v-for="(contact, ix) in project.contacts" v-bind:key="??"&gt;
                              {{ contact.name }}&lt;br /&gt;
                              {{ contact.title }}&lt;br /&gt;
                              {{ contact.email }}&lt;br /&gt;
                              {{ contact.phone }}
                              &lt;div class="buttons"&gt;
                                  &lt;button v-if=!isEditingContact id="edit-contact" v-on:click="editContact(contact, ix)"&gt;edit&lt;/button&gt;
                                  &lt;button v-if=isEditingContact v-on:click="cancelEdit"&gt;cancel&lt;/button&gt;
                                  &lt;button v-if=isEditingContact v-on:click="post"&gt;save changes&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;!-- show FORM if editMode TRUE --&gt;
                      &lt;fieldset v-if="isEditingContact"&gt;
                      &lt;!--
                          SNIP:
                          FORM TO BE DISPLAYED IN PLACE OF THE SELECTED CONTACT,
                          AND W/OUT HIDING OTHER CONTACTS
                      --&gt;
                      &lt;/fieldset&gt;
                  &lt;/dd&gt;
              &lt;/dl&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      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
      }
  &lt;/script&gt;
  </code></pre>