How can I replace element in vue.js 2?

Question

My component vue like this :

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

If the link in tag li clicked, I want to replace the element li to be like this :

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

So if I click the second element li, the it will replace the seconde element li

How can I do it?

Phil · Accepted Answer · 2017-07-12 05:46:26Z

1

Simply use v-if / v-else to toggle the elements, keeping track of the clicked ones in an object or similar

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

and in your template

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

Demo ~ https://jsfiddle.net/49gptnad/392/

edited Jul 12, 2017 at 5:46

answered Jul 12, 2017 at 5:33

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I replace element in vue.js 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related