Условный рендеринг: сравнение результата асинхронной функции в v-if

Question

Условный рендеринг: сравнение результата асинхронной функции в v-if

1

У меня есть компонент 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'" но он все равно не работает.

Adrian K. 31 июль 2018, в 18:03

Источник

0

использует свойство watch / data вместо v-if="async function"
Sphinx 31 июль 2018, в 15:49

Теги:

javascript

vue.js

axios

vue-component

1 ответ

Ещё вопросы

использует свойство watch / data вместо v-if="async function"

kotapeter · Accepted Answer · 2018-07-31T13-03-00.000Z

Вам нужно дождаться результата метода.

Сначала вам нужно запустить метод 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();
  }
});

Работал отлично. Теперь у меня есть лучшее понимание жизненного цикла компонентов.