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

【问题标题】：How can I replace element in vue.js 2?如何替换 vue.js 2 中的元素？
【发布时间】：2017-12-16 08:51:22
【问题描述】：

我的组件 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 中的链接，我想将元素 li 替换为这样：

<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>

所以如果我点击第二个元素 li，它将替换第二个元素 li

我该怎么做？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuex

【解决方案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/

【讨论】：