Revaycolizer
Revaycolizer
Explore posts from servers
NNuxt
Created by Revaycolizer on 11/2/2024 in #❓・help
My UI won't update even though I successfully receive response
I have this code below I successfully get the response but the UI won't update I still see no data available
<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const number = ref(0);
const data = ref([]);

async function submit() {
try {

const response = await $fetch('/api/data', {
method: 'POST',
body: { test: 123, name: name.value, number: number.value },
});

console.log("Response from API:", response);

data.value = Array.isArray(response) ? response : [response];

console.log("Updated data:", data.value);
} catch (error) {
console.error("Error fetching data:", error);
data.value = [];
}
}
</script>

<template>
<input type="number" v-model.number="number" placeholder="Enter a number" />
<input type="text" v-model.trim="name" placeholder="Enter a name" />
<button @click="submit">Submit</button>


<div v-if="data.value && data.value.length > 0">
<div v-for="(da, index) in data" :key="index">
<p>{{ da.test || da }}</p>
</div>
</div>

<div v-else>
<p>No data available</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const name = ref('');
const number = ref(0);
const data = ref([]);

async function submit() {
try {

const response = await $fetch('/api/data', {
method: 'POST',
body: { test: 123, name: name.value, number: number.value },
});

console.log("Response from API:", response);

data.value = Array.isArray(response) ? response : [response];

console.log("Updated data:", data.value);
} catch (error) {
console.error("Error fetching data:", error);
data.value = [];
}
}
</script>

<template>
<input type="number" v-model.number="number" placeholder="Enter a number" />
<input type="text" v-model.trim="name" placeholder="Enter a name" />
<button @click="submit">Submit</button>


<div v-if="data.value && data.value.length > 0">
<div v-for="(da, index) in data" :key="index">
<p>{{ da.test || da }}</p>
</div>
</div>

<div v-else>
<p>No data available</p>
</div>
</template>
11 replies