代码之家 › 专栏 › 技术社区 › Darj

条件呈现:比较v-if中异步函数的结果

axios vue-component vue.js javascript

1

Darj · 技术社区 · 7 年前

我有一个 Vue 边栏的组件,模板定义为:

Vue.component('navigation',{
  template:`
    <ul class="nav">
      <li v-if="checkIfUserIsAdmin() == true" id="adminMenu"></li>
      <li id="userMenu"></li>
  `,
  methods: {
    checkIfUserIsAdmin() {
      var result = false;
      axiosInstance.get("/Profile/GetUserInfo").then(userInfo => {
        result = userInfo.data.u.isAdmin;
      })
      .catch(userError => {
        swal({
          title: "Operational Platform",
          text: "Unable to retrieve user info"
        });
        result = false;
      });
      return result;
    }
  }
});

为了简洁起见,删除了一些代码。
当我访问 /Profile/GetUserInfo 我得到了一个JSON作为回报,它正确地返回了我 true 但是adminMenu没有显示,我想知道为什么。看起来 v-if 是我搞砸的地方。我也试过将adminMenu改为 v-if="checkIfUserIsAdmin() == 'true'" 但还是没用。

1 回复 | 直到 7 年前

1

Peter Kota 7 年前

你需要等待方法的结果。

首先你需要运行 checkIfUserIsAdmin 方法安装组件时。在 checkIfUserIsAdmin 方法中存储查询结果 adminMenuDisplay 变量,然后您可以在 v-if .

Vue.component('navigation',{
  template:`
    <ul class="nav">
      <li v-if="adminMenuDisplay" id="adminMenu"></li>
      <li id="userMenu"></li>
  `,
  data() {
    return {
      adminMenuDisplay: false
    };
  }
  methods: {
    checkIfUserIsAdmin() {
      var result = false;
      axiosInstance.get("/Profile/GetUserInfo").then(userInfo => {
        this.adminMenuDisplay = userInfo.data.u.isAdmin;
      })
      .catch(userError => {
        swal({
          title: "Operational Platform",
          text: "Unable to retrieve user info"
        });
        this.adminMenuDisplay = false;
      });
    }
  },
  mounted() {
    this.checkIfUserIsAdmin();
  }
});