Question

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

Answer 1

尝试使用此 v-if =“！category.attributes [index] .show”而不是

 <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如果没有得到值或者得到值null。然后，您需要在data（）

中设置默认值

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

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

1 个答案: