title: Toggle hide on v-for item's child DOM element
body: <p>For example, here is template:</p>
  <pre><code>&lt;template&gt;
      &lt;table class=&quot;table table-hover&quot;&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th style=&quot;width:260px&quot;&gt;Info&lt;/th&gt;
                  &lt;th&gt;Details&lt;/th&gt;
                  &lt;th&gt;Actions&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr v-for=&quot;(item, index) in items&quot;&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          &lt;span class=&quot;hover-on-click-input&quot;&gt;{{item.content.name}}&lt;/span&gt;
                          &lt;input class=&quot;form-control hidden&quot; type=&quot;text&quot; :value=&quot;item.content.name&quot; @blur=&quot;updateInfo(item, 'author', $event.target.value)&quot;&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/template&gt;
  </code></pre>
  <p><code>items</code> for <code>v-for</code> loaded dynamically after page has been loaded.</p>
  <p>What is the best way with Vue2.js on span click to hide it and unhide input element, while if after that clicked anywhere on the page(or input lost focus) input toggle back to hidden again and span unhidden? Plus value of input will be send to server.</p>
  <p>I already red this: <a href="https://v2.vuejs.org/v2/guide/list.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/list.html</a><br />
  And this: <a href="https://v2.vuejs.org/v2/guide/class-and-style.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/class-and-style.html</a></p>
  <p>The problem is that item of <code>v-for</code> here is <code>&lt;tr&gt;</code>. Not <code>&lt;span&gt;</code> or <code>&lt;input&gt;</code>, but changes need to be applied to <code>&lt;span&gt;</code> and <code>&lt;input&gt;</code> element. So we can say to &quot;item's DOM child elements&quot;.</p>
  <p>Thanks.</p>