获取的数据未填充在表 [vue] 中

Question

我是 js/vue 的新手，我正在尝试从 API 获取数据。我有一个字段，该字段的值将用于从该关键字的 API 获取数据。我可以在控制台日志中看到我确实将数据作为数组获取。但是，该数据不会填充到表中。

值得一提的奇怪之处在于，如果我对代码稍作更改，例如删除额外空间并保存...而我仍然打开浏览器并获取数据，那么表格将被填充。

在脚本中我有：

let data;

const fetchData = async (inputString: string) => {
 data = await getData(inputString);
 console.log('Data', data);
 return data;
}

和输入字段+按钮： <input v-model='inputString' placeholder='Write keyword here' /> <button action @click='fetchData(inputString)"> Fetch data </button>

Answer 1

您的数据变量需要对模板具有反应性才能了解更改。

import { ref } from 'vue';  
const data = ref<null|string>(null);

const fetchData = async (inputString: string) => {
 data.value = await getData(inputString);
 console.log('Data', data);
 return data.value;
}

在您的模板中，您可以简单地使用这样的数据：

<div>{{data}}</div>

在此处查看有关反应性的更多信息：https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref