如何替换vue.js 2中的元素？

Question

我的组件VUE这样的：

<template> 
    <div> 
     <ul class="list-inline list-photo"> 
      <template v-for="item in items"> 
       <li> 
        <a href="javascript:;" class="thumbnail thumbnail-upload" 
         :title="trans('store.add.img.button')" @click="addPhoto"> 
         <span class="fa fa-plus fa-2x"></span> 
        </a> 
       </li> 
      </template> 
     </ul> 
    </div> 
</template> 
<script> 
    export default { 
     data() { 
      return { 
       items: [1, 2, 3, 4, 5] 
      } 
     }, 
     methods: { 
      addPhoto() { 
       // change element clicked 
      } 
     } 
    } 
</script> 

如果在标签里的链接点击，我想替换元素里是这样的：

<li> 
    <div class="thumbnail"> 
     <img src="https://myshop.co.id/img/no-image.jpg" alt=""> 
     <a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a> 
    </div> 
</li> 

所以，如果我点击第二个元素里，它将取代seconde元素li

我该怎么办？

Answer 1

只需使用v-if/v-else切换的元素，跟踪的点击者的物体或类似

export default { 
    data() { 
     return { 
      items: [1, 2, 3, 4, 5], 
      clicked: [] // using an array because your items are numeric 
     } 
    }, 
    methods: { 
     addPhoto(item) { 
      this.$set(this.clicked, item, true) 
     } 
    } 
} 

，并在您的模板

<li v-for="item in items"> 
    <div class="thumbnail" v-if="clicked[item]"> 
     <img src="https://myshop.co.id/img/no-image.jpg" alt=""> 
     <a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a> 
    </div> 
    <a v-else href="javascript:;" class="thumbnail thumbnail-upload" 
     :title="trans('store.add.img.button')" @click="addPhoto(item)"> 
     <span class="fa fa-plus fa-2x"></span> 
    </a> 
</li> 

演示〜https://jsfiddle.net/49gptnad/392/