Using conditional rendering to compare the outcome of an asynchronous function within v-if condition

Question

Using conditional rendering to compare the outcome of an asynchronous function within v-if condition

I have a Vue component for a sidebar with the following template:

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;
    }
  }
});

Some code has been omitted for brevity.
When I make a request to /Profile/GetUserInfo, I receive a JSON response that includes true for the isAdmin value, but the adminMenu element is not being displayed. I suspect that the issue lies within the v-if condition. I even attempted changing the condition to

v-if="checkIfUserIsAdmin() == 'true'"

, but this did not resolve the problem.

javascript vue.js vue-component axios

Answer 1

Answer №1

To obtain the desired outcome, you must be patient for the method's response.

Initially, execute the checkIfUserIsAdmin method upon mounting the component. Within the checkIfUserIsAdmin method, ensure to save the query result in the adminMenuDisplay variable, which will then be monitored using 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();
  }
});

Answer 2

To obtain the desired outcome, you must be patient for the method's response.

Initially, execute the checkIfUserIsAdmin method upon mounting the component. Within the checkIfUserIsAdmin method, ensure to save the query result in the adminMenuDisplay variable, which will then be monitored using 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();
  }
});

Using conditional rendering to compare the outcome of an asynchronous function within v-if condition

Answer №1

Similar questions

Error: The function $(...)button is not recognized

I'm having an issue where the Bootstrap dropdown submenu is not displaying properly depending on

What could be causing the Error 400 message to appear when trying to upload a JSON file via an HTTP request?

Having difficulty capturing an error related to an invalid form body in discord.js

Solving the Angular form glitch: error message not displaying

The issue of invalid prop in Vue Utils

Update picture using Vanilla Javascript for mobile display

Trouble presenting information retrieved from API

Provide JWT token back to JavaScript Single Page Application after completing OAuth login

Exploring the functionalities of ng-value and ng-model in text input form fields

How to selectively filter an array of objects using another array in JavaScript

Utilizing JSON and AJAX to mine data from databases

Removing HTML DOM elements from a string using JavaScript: A step-by-step guide

The Typewriter Effect does not appear alongside the heading

Strategies for managing the integration of mixins, filters, and directives in a sprawling Vue.js project

Adding a click function to a div individually when they share the same class in HTML

What is the best way to showcase 100 json data entries within an HTML document?

Error in Angular 4: Undefined property 'replace' causing trouble

"An error occurred when processing the JSON data, despite the JSON

Why is my Vue/MySQL Database not showing up online, even though it is accessible locally?