提取的数据未填充到表[vue]中

jv2fixgn  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(157)

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

vh0rcniy

vh0rcniy1#

您的数据变量必须是React性的,模板才能知道更改。

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>

有关React性的更多信息,请访问:https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive-variables-with-ref

相关问题