title: Ability to toggle True/False with ( v-if ) in the loop
body: <p>I am asking about hiding and showing an element in Vue.js</p>
  
  <p>I always use this</p>
  
  <pre><code>&lt;ele v-if="value" /&gt;
  </code></pre>
  
  <p>and then set {value} in Vue Instance data object, then toggle True/False for toggle visible, but now in my situation , my v-if condition put in some element , then this element create with v-for directive </p>
  
  <p>some thing like this </p>
  
  <pre><code>&lt;div v-for="item in items" &gt;
   &lt;ele v-if="value" :key="item.i" /&gt;
   &lt;ele v-if="value" :key="item.i" /&gt;
   &lt;ele v-if="value" :key="item.i" /&gt;
  
       // this button fire a method for Change (toggle) value (used for v-if)
     &lt;button @click="ToggleValue" &gt; update &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my view i have a table contain some rows and each rows have some field ( all field have v-if directive ) and in each rows we have button for fire method</p>
  
  <p>Now what is my question ?!!</p>
  
  <p>At the end my table is doing this , when click on every button ToggleValue method execute and toggle value of (value) object , now all field in all rows change the value ( all thing doing right :D )</p>
  
  <p>but I want click on every button in each row just change the value of that row</p>
  
  <p>I have dummy way </p>
  
  <pre><code>&lt; ele v-if="value(item.id)" /&gt;
  .........
  .........
  &lt;button @click="ToggleValue(itme.id)" &gt; 
  </code></pre>
  
  <p>if my index of loop is Const and static I use this way , but now items in loop are dynamic </p>
  
  <p>all thing was in my pen at here , thanks for give me your time </p>
  
  <p><a href="https://codepen.io/hamidrezanikoonia/pen/OQGrPB?editors=1100" rel="nofollow noreferrer">https://codepen.io/hamidrezanikoonia/pen/OQGrPB?editors=1100</a></p>