在异步功能调用后更新 Vue 数据值

如何解决在异步功能调用后更新 Vue 数据值

我有一个包含文本对象的 Vue 应用程序，需要在 api 调用后更新它。

目前我已通过以下方式解决此问题：

      document.querySelector("#text").textContent = result.quote;

成功解析后的内部超时函数

但我真的需要学习如何通过以异步方式将外部值绑定到 Vue 应用程序来使其工作。

  var textEl = new Vue({
    el: "#text",data: {
      text: //here,},});

...

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h3 class="margin" id="text"></h3>
  <script>
    const api = "https://api.jsonbin.io/b/6080dabc56c62a0c0e8a1bcf";

    async function radnomQuote() {
      return await fetch(api)
        .then((response) => response.json())
        .then((res) => {
          return res.quotes[Math.floor(Math.random() * res.quotes.length)];
        });
    }

    async function asyncGuote() {
      const result = await radnomQuote();
      setTimeout(function() {
        document.querySelector("#text").textContent = result.quote;
      },500);
    }

    var textEl = new Vue({
      el: "#text",data: {
        text: "",created() {
        asyncGuote();
      },});
  </script>
</body>

</html>

我尝试了很多事情，例如：

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/vue"></script>
</head>

<body>
  <h3 class="margin" id="text"></h3>
  <script>
    const api = "https://api.jsonbin.io/b/6080dabc56c62a0c0e8a1bcf";

    async function radnomQuote() {
      return await fetch(api)
        .then((response) => response.json())
        .then((res) => {
          return res.quotes[Math.floor(Math.random() * res.quotes.length)];
        });
    }
    let txt
    async function asyncGuote() {
      const result = await radnomQuote();
      setTimeout(function() {
        return txt = result.quote;
      },data: {
        text: txt,});
  </script>
</body>

</html>

并且：

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <h3 class="margin" id="text"></h3>
  <script>
    const api = "https://api.jsonbin.io/b/6080dabc56c62a0c0e8a1bcf";

    async function radnomQuote() {
      return await fetch(api)
        .then((response) => response.json())
        .then((res) => {
          return res.quotes[Math.floor(Math.random() * res.quotes.length)];
        });
    }
    let txt
    async function asyncGuote() {
      const result = await radnomQuote();
      setTimeout(function() {
       txt = result.quote
        return txt;
      },data: {
        text: asyncGuote(),});
  </script>
</body>

</html>

我已经阅读了有关计算属性和观察者的内容，但我还不了解它们，或者这不是我想要的。

vue 中随机引用的整个项目在这里： https://codepen.io/ikiK_Cro/pen/ZELmgeP ，我真的不喜欢我在 querySelector 函数中通过 async 获取元素而我已经定义了 Vue 应用程序.我觉得必须有一种方法来更新应用程序本身，例如 nativeScript 中的 observable 对象，用于监视内部值的变化。

请指教

解决方法

您没有正确使用 async,await 语法。当您使用 async 和 await 时，您不需要使用 .then() - 它是 .then() 的替代品，只是一种不同的语法。

你还需要正确使用vue。您的所有函数都需要位于 vue 实例的 methods 部分。

我建议使用您使用 @vue/cli follow this docs 打开的项目，一旦有了，您就可以使用以下代码：

<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>

出于某种原因，我遗漏了元素中的元素绑定...

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

我可以通过定位应用程序字段访问和更改函数内部的值：

textEl.text=result.quote;

在异步功能调用后更新 Vue 数据值

如何解决在异步功能调用后更新 Vue 数据值

解决方法

相关推荐