[Vuejs]-Trying to hide and show icon using vue js

by

0👍

try with this v-if=”!category.attributes[index].show” instead fo v-else

 <template>
        ....
        <a href="#" class="social-button" @click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
            <i class="fa fa-eye" v-if="category.attributes[index].show"></i>
            <i class="fa fa-eye-slash" v-if="!category.attributes[index].show"></i>
       </a>
       ....
    </template>

    <script>
        export default {
            ...
            showAttribute(index){
                this.category.attributes[index].show = !this.category.attributes[index].show;
            },
            ...
        }
    </script>

onPage load if you don’t get the value or if you get the value null. then, you need to set the default value in the data()

here is the working example, https://codepen.io/anon/pen/rvqYgz

Leave a comment