时间戳

首页 > 解决方案 > 如何在vue中隐藏元素？

vue.js - 如何在vue中隐藏元素？

问题描述

我想隐藏一个基于条件的元素，这就是我所做的：首先我使用带有计算属性的 v-if，但它不起作用，因为当 HMR 重新加载页面时，按钮被隐藏。当我注销并登录并使用其他条件刷新 localSorage 时，该按钮仍处于隐藏状态，反之亦然，该按钮显示在不应该显示的位置。为什么？这是我的代码：

computed:{
    RegistrarUsuario(){
        var userData = JSON.parse(localStorage.getItem("usuario"));
        var acciones = userData.info.Acciones
        for(var i = 0; i < acciones.length; i++){
            if(acciones[i].accion === 'RegistrarUsuario'){                    
                return false;                                   
            }
            else{
                return true;
            }                
        }               
    }
},

<v-btn v-if="RegistrarUsuario" slot="activator" dark>Agregar</v-btn>

标签： vue.js

解决方案

您只查看acciones数组的第一个元素（在第一次迭代时返回 true 或 false）。我怀疑如果任何元素匹配，您想要返回 false 。为此，您可以使用 Array.some()：

RegistrarUsuario(){
    var userData = JSON.parse(localStorage.getItem("usuario"));
    var acciones = userData.info.Acciones

    return !acciones.some(a => a.accion === 'RegistrarUsuario');                   
}

推荐阅读