Question

我的组件如下：

<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，它将替换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/

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

1 个答案: