Question

我为侧边栏有一个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'"，但仍然无法正常工作。

Answer 1

您需要等待方法的结果。

首先，在安装组件时，需要运行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();
  }
});

条件渲染：在v-if中比较异步函数的结果

1 个答案: