[Vuejs]-Update Vue data value after async fucntion call

by

0👍

✅

For some reason I left out element binding in element…

 <h3 class="margin" id="text">{{text}}</h3>

Than I can access and change value inside function by targeting apps field:

textEl.text=result.quote;

0👍

You are not using async, await syntax properly. when you use async and await you don’t need to use .then() – it is the replacement to .then(), just a different syntax.

You also need to use vue properly. all your functions need to be at the methods section of the vue instance.

I would recommend working with a project you open using @vue/cli follow this docs and once you have you can use the code below:

<template>
  <h3 class="margin" id="text"> {{ text }}</h3>
</template>

  <script>
    // here include all you imports

    const api = "https://api.jsonbin.io/b/6080dabc56c62a0c0e8a1bcf";

    export default {
      data(){
         return  {
            text: "",
         }
      },
      mounted() {
        this.asyncGuote();
      },
      methods: {
         async function radnomQuote() {
            let response = await fetch(api);
            response = await response.json();
            return response.quotes[Math.floor(Math.random() * response.quotes.length)];
         },
         async function asyncGuote() {
            const result = await this.radnomQuote();
            setTimeout(function() {
               this.text = result.quote;
            }, 500);
         }
      }
   };
  </script>

Leave a comment