尝试使用vue js隐藏和显示图标答案

【问题标题】：Trying to hide and show icon using vue js尝试使用vue js隐藏和显示图标
【发布时间】：2018-05-17 03:38:45
【问题描述】：

我试图在点击时隐藏并显示一个很棒的字体 5 图标。值在场景后面发生变化，但图标没有被更改。我已经尝试过 vue js 必须提供的其他类绑定，但它产生了相同的结果。

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

【问题讨论】：

你试过v-show - vuejs.org/v2/guide/conditional.html#v-show 吗？
var= index @click.prevent="showAttribute(index)" 来自哪里？您是否打开了 Web 控制台以检查从 showAttribute 抛出的任何错误？
@NafiulIslam 是的，我也尝试过使用 v-show。连同仍然没有运气
@Sphinx。 @click.prevent="showAttribute(index) 在 v-for 中，但我没有在问题中包含它

标签： vue.js font-awesome-5

【解决方案1】：

试试这个 v-if="!category.attributes[index].show" 而不是 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 加载，如果您没有获得该值或如果您获得 null 值。然后，您需要在 data() 中设置默认值

这是工作示例，https://codepen.io/anon/pen/rvqYgz

【讨论】：

您最初在 category.attributes[index].show 中得到了什么？