Is there a different technique I can use to display an axios response within a v-if statement? Any other methods I should

Question

Is there a different technique I can use to display an axios response within a v-if statement? Any other methods I should

As a newcomer to Vue.js, I'm struggling with certain concepts even after extensively reading the documentation!

My goal is to show a glyphicon when my API call returns true.

However, since the call is within a for loop iterating over multiple items, I'm unable to store the response in a variable due to it getting overwritten with each iteration...

The specific code where I want to implement this display is as follows:

<div class="list-group-item"
          v-for="item in exercices['data']" :key="item">
          <h3 class="list-group-item-heading titre">
            <p><a > {{ item[1] }}</a>
                <span v-if="checkIsValid(item[0]) === true">
                  <span class="glyphicon glyphicon-ok" ></span>
                </span>
            </p>

And the axios call is made in this part of the code:

      checkIsValid(id, index){
        this.$axios
      .get('http://127.0.0.1:5000/checkIsValid/'+id+'/'+ Vue.prototype.$userMail)
      .then(response => ( ??? )
      )
      }

Any suggestions or ideas on how to approach this challenge would be greatly appreciated!

Thank you in advance!

javascript vue.js axios

Answer 1

Answer №1

If your method checkIsValid makes an asynchronous call, using it directly in a v-if is not possible. To handle this, you can iterate through each element in the exercices array in the mounted hook and update their validity status.

export default {
    // ...
    data() {
        return {
            exercices: [
                {
                    // ...
                },
                {
                    // ...
                }
            ]
        }
    },
    mounted() {
        this.exercices.forEach(element => {
            this.$axios.get("URL_HERE")
                .then(() => {
                    this.$set(element, "isValid", true);
                })
                .catch(() => {
                    this.$set(element, "isValid", false);
                })
        });
    }
}

Make sure to use this.$set for proper reactivity. For more information on change detection caveats, refer to this link.

Update your v-if condition to:

<span v-if="item.isValid">

Answer 2

If your method checkIsValid makes an asynchronous call, using it directly in a v-if is not possible. To handle this, you can iterate through each element in the exercices array in the mounted hook and update their validity status.

export default {
    // ...
    data() {
        return {
            exercices: [
                {
                    // ...
                },
                {
                    // ...
                }
            ]
        }
    },
    mounted() {
        this.exercices.forEach(element => {
            this.$axios.get("URL_HERE")
                .then(() => {
                    this.$set(element, "isValid", true);
                })
                .catch(() => {
                    this.$set(element, "isValid", false);
                })
        });
    }
}

Make sure to use this.$set for proper reactivity. For more information on change detection caveats, refer to this link.

Update your v-if condition to:

<span v-if="item.isValid">

Is there a different technique I can use to display an axios response within a v-if statement? Any other methods I should

Answer №1

Similar questions

Find the location in a node.js script where a promise was rejected

Strange actions observed in JavaScript addition operations

What are the ways to utilize vue-i18n setup within and beyond Vue components when working with Quasar?

What sets apart optionalDependencies from peerDependencies in the Meta optional?

Updating a nested object in MongoDB using Mongoose and calling the markModified method

What is the best way to include an external JavaScript file in a Bootstrap project?

When starting a new project with Angular 7, the option to set up routing is automatically included without asking for confirmation

Steps to display a variable in JavaScript on an HTML textarea

The mismatch between JSON schema validation for patternProperties and properties causes confusion

Troubleshooting problems with dynamic elements and qTip

Calculating the mean value of a multidimensional array that has been sorted in JavaScript

Determine whether the current page was reached by pressing the back button

the function does not wait for the DOM content to finish loading

Rotating the camera in first person perspective using Three.js

Is it possible for the outcome of a component to be passed to render and actually show up as undefined

Issue with Electron-vue: 'compute:' not functioning as expected

Utilizing JSON and CodeIgniter within HTML elements

Require assistance in accessing the second tab on a webpage using JavaScript tabs

Updating specific data in MongoDB arrays: A step-by-step guide

Tips for dynamically passing parameters to functions in JavaScript?