异步函数完成后通过:data-obj指令添加DOM数据遇Promise问题求助

问题核心是异步函数本身返回的就是Promise对象，直接在模板中调用getData()会把Promise绑定到data-obj上，而非最终的异步结果。计算属性不支持异步逻辑（要求同步返回值），所以用计算属性也会触发ESLint报错。

推荐的解决方案是用响应式变量存储异步结果，待数据获取完成后再更新变量，模板直接绑定该变量：

具体实现步骤 #

• 定义一个响应式变量，用于存储最终要绑定的数据，初始值设为空或默认值
• 在组件初始化阶段（比如onMounted钩子或setup直接执行）调用异步函数，获取数据后更新响应式变量
• 模板中直接绑定这个响应式变量，而非调用异步函数

修改后的代码示例 #

<template>
  <div
    class="test-data"
    :data-obj="dataObj"
  />
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'compName',
  components: {
    // ...你的组件
  },
  props: {
    // ...你的props
  },

  setup(props) {
    // 定义响应式变量存储最终数据
    const dataObj = ref('');

    /**
     * 从API获取数据
     */
    function getTestData() {
      // 注意：fetch返回的Response需要先转成json格式
      return fetch("theThingsINeed").then(resp => resp.json());
    }

    // 封装异步逻辑，获取数据后更新响应式变量
    async function fetchData() {
      try {
        const data = await getTestData();
        dataObj.value = JSON.stringify(data);
      } catch (err) {
        // 处理请求错误
        console.error('获取数据失败:', err);
      }
    }

    // 组件挂载后执行异步请求
    onMounted(() => {
      fetchData();
    });

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

额外说明 #

• 如果需要根据props变化重新获取数据，可以用watch监听props，变化时重新调用fetchData
• 初始状态下dataObj为空字符串，你可以根据需求设置默认值（比如'{}'），避免DOM上的data-obj为空
• 不要在模板中直接调用异步函数，这会导致组件每次渲染都重新发起请求，造成性能问题

内容的提问来源于stack exchange，提问作者dustin