时间戳

首页 > 解决方案 > 尝试使用vue js隐藏和显示图标

vue.js - 尝试使用vue js隐藏和显示图标

问题描述

我试图在点击时隐藏并显示一个很棒的字体 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>

标签： vue.jsfont-awesome-5

解决方案

试试这个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>

如果您没有获得该值或获得的值为 null，则 onPage 加载。然后，您需要在 data() 中设置默认值

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

推荐阅读