Trying to hide and show icon using vue js

Question

I am trying to hide and show a font awesome 5 icon on click. The value changes behind the scene but the icon isn't being changed. I have tried the other class bindings that vue js has to offer but it produced the same result.

<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-else></i>
   </a>
   ....
</template>

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

Have you tried `v-show` - https://vuejs.org/v2/guide/conditional.html#v-show ? — Nafiul Islam, May 16 '18 at 18:41
where the var= **index** `@click.prevent="showAttribute(index)"` comes from? Have you opened the web console to check any error was threw up from `showAttribute`? — Sphinx, May 16 '18 at 18:50
@NafiulIslam Yeah, I tried using v-show also. along with and still no luck — user2538755, May 16 '18 at 18:58
@Sphinx. @click.prevent="showAttribute(index) is within a v-for, but I didn't include that within the question — user2538755, May 16 '18 at 19:00

Sanjay V · Answer 1 · 2018-05-16T19:38:45.557

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

what you are getting initially in category.attributes[index].show? — Sanjay V, May 16 '18 at 19:21

Trying to hide and show icon using vue js

1 Answers1