如何从全局函数使用v-if

时间:2019-07-03 16:43:06

标签: laravel vue.js

这是我的vue组件代码

<div v-if="$can('employee-create')" class="card-tools">
              <router-link to="/admin/addphonebook" class="btn btn-success">
                Add New
                <i class="fa fa-phone"></i>
              </router-link>
            </div>

这是resources / assets / js / mixins / Permissions.vue文件

export default {
methods: {
    $can(permissionName) {
        let route = window.routes.permission;
        axios.get(route+`/${permissionName}`)
            .then((resounse)=> {
                return true;
            })
            .catch((error)=> {
                return false;
            });
    },
},

};

这是用于导入mixin的resources / assets / js / app.js

import Permissions from './mixins/Permissions';

Vue.mixin(Permissions);

$ can函数返回true,但“添加新”按钮未显示

v-如果未获得返回真值

有人可以帮助我吗? 预先感谢

1 个答案:

答案 0 :(得分:0)

@Csaba Gergely 解决了您的问题。当您从服务器$ can方法中获取数据时,一秒钟或更短时间内返回true,但是在调用$ can steel之后返回false。您可以创建一个名为success的变量并存储axios调用结果。

一定是这样的

<div v-if="success" class="card-tools">
              <router-link to="/admin/addphonebook" class="btn btn-success">
                Add New
                <i class="fa fa-phone"></i>
              </router-link>
            </div>

export default {
data(){
 return {
    success:false
  }
},
methods: {
    $can(permissionName) {
        let route = window.routes.permission;
        axios.get(route+`/${permissionName}`)
            .then((resounse)=> {
                this.success = true;
                //return true;

            })
            .catch((error)=> {
                this.success = false;
               //return false;
            });
    },
},

P.S。 Bocsi @Csaba Gergely,哈·埃普波坦(el elpolpoltam)激怒了最讨厌的人((