title: How can I replace element in vue.js 2?
body: <p>My component vue like this : </p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;ul class="list-inline list-photo"&gt;
              &lt;template v-for="item in items"&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:;" class="thumbnail thumbnail-upload"
                         :title="trans('store.add.img.button')" @click="addPhoto"&gt;
                          &lt;span class="fa fa-plus fa-2x"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/template&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          data() {
              return {
                  items: [1, 2, 3, 4, 5]
              }
          },
          methods: {
              addPhoto() {
                  // change element clicked
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If the link in tag li clicked, I want to replace the element li to be like this :</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="thumbnail"&gt;
          &lt;img src="https://myshop.co.id/img/no-image.jpg" alt=""&gt;
          &lt;a href="javascript:;" class="thumbnail-check"&gt;&lt;span class="fa fa-check-circle"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>So if I click the second element li, the it will replace the seconde element li</p>
  
  <p>How can I do it?</p>