I'm currently exploring js/vue and I'm attempting to retrieve data from an API. There's a field where the value is used to fetch data from the API based on that keyword. When I check the console log, I can see that the data is being received as an array. However, for some reason, the data isn't populating in the table.
An interesting observation is that if I make a small change in the code, like removing extra spaces and saving... while keeping the browser open with the fetched data, then the table suddenly populates.
Within the script, I have:
let data;
const fetchData = async (inputString: string) => {
data = await getData(inputString);
console.log('Data', data);
return data;
}
And here are the input field + button:
<input v-model='inputString' placeholder='Enter keyword here' /> <button action @click='fetchData(inputString)"> Fetch data </button>