vue.js 在异步函数完成后使用：data-obj指令添加数据

whhtz7ly 于 2023-02-13 发布在 Vue.js

关注(0)|答案(1)|浏览(140)

我尝试使用：data-obj指令向DOM添加一些数据。然而，我想延迟此过程，直到一个异步函数完成。不幸的是，每次我尝试此操作时，它只添加了承诺。我尝试等待computed方法中的响应，但仍然返回了承诺，eslint对此很讨厌。有什么想法吗？

<template>
  <div
    class="test-data"
    :data-obj="getData()"
  />
</template>

<script>
export default {
  name: 'compName',
  components: {
    ...,
  },
  props: {
   ...
  },

  setup(props) {
   
    /**
   * Get data from api
   */
    function getTestData() {
      return new Promise((resolve) => {
        const query = "theThingsINeed"
        fetch(query).then((resp) => {
          resolve(resp);
        });
      });
    }

    const getdata = async () => {
      const data = await getTestData();
      return JSON.stringify(data);
     
    };

    return {
      getdata,
    };
  },
};
</script>

vue.js

来源：https://stackoverflow.com/questions/75417534/add-data-using-the-data-obj-directive-after-async-function-finishes

1条答案

按热度按时间

jobtbby31#

我能够通过使用挂载方法和我在那里的函数来让它工作。

<template>
  <div
    class="test-data"
    :data-obj="getData()"
  />
</template>
...
data() {
    return {
      data: null,
    };
  },
  mounted() {
    this.testData = async () => {
      const data = await this.getTestData();
      this.data = JSON.stringify(data);
    };
    this.testData();
  },
  methods: {
    /**
     * Get data from api
     */
    getTestData() {
      return new Promise((resolve) => {
        const query = "theThingsINeed"
        fetch(query).then((resp) => {
          resolve(resp);
          return resp;
        });
      });
    },

赞(0）回复(0）举报 2023-02-13

我来回答

vue.js 在异步函数完成后使用：data-obj指令添加数据

1条答案

相关问题

热门标签

最新问答