vue.js - 如何替换 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 中的链接被点击，我想将元素 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

我该怎么做？

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/