title: Vue.js, How to check v-if directive with the results of an asynchronous function
body: <p>I am showing to users, a web app which has links to another website. Depending on which link the user clicks on, it will take them to another page or stay on the same page.</p>
  <p>My current implementation approach is to have a &quot;v-if&quot; directive that checks the results of an async function, but the value of the function always returns &quot;Promise pending&quot; and not the actual value.</p>
  <p>I am trying to do something like</p>
  <pre><code>&lt;router-link v-else-if=&quot;checkValue(origin.link)&quot; target=&quot;_blank&quot; :to= &quot;origin/link&quot; &gt;
                            &lt;span @click=&quot;checkValue(origin.link)&quot;&gt;
                              {{ origin.value }} 
                            &lt;/span&gt;
                          &lt;/router-link&gt;
  </code></pre>
  <p>the issue here is that &quot;checkValue&quot; in the v-if is an promise, so it never gets the true or false value, in the v-if.</p>
  <p>I cannot store the data of this call in an data variable because there is millions and millions of records, and I can't store all of them. &quot;checkValue&quot; is an asynchronous function like so</p>
  <pre><code>async checkValue(link: string) {
        const val = await axios.get('service/${link}')
              if(val) {
                 return true
              } else {
                 return false
              }
  </code></pre>
  <p>Is there a way in the v-if directive, that I can check the return of this asynchronous function? Or Is there another approach I can do to solve this? thank you</p>