In my Vue 3 setup() method, I have an array [] stored as a constant. This array consists of X objects and represents the responses of a form.
My goal is to showcase each object on a single dynamic page within our internal dashboard by using v-for in the template to avoid repeating markup code. Here is the approach I have considered:
<template>
<div>
<div v-for="(item, index) of entries" :key="index">
<dt class="text-sm font-medium text-gray-500">{{ item.label }}</dt>
<dd class="mt-1 text-sm text-gray-900">{{ item.response }} // Currently empty in the template</dd>
</div>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
import { supabase } from "../utils/supabaseClient.js";
export default {
setup() {
const data = ref({
// The data object is initially empty and will be populated onMounted, but it currently shows as undefined. I also attempted beforeEnterRoute without any success.
name: "John Example",
company: "Example Company",
radio: "False",
});
const entries = ref([
// ... additional entries above this point
{
label: "Name",
response: data.value.name, // This appears as undefined, as do the other entries where I attempted similar assignments.
},
{
label: "Company Name",
response: data.value.company, // This appears as undefined, as do the other entries where I attempted similar assignments.
},
{
label: "Any Additional Information?",
response: data.value.radio, // This appears as undefined, as do the other entries where I attempted similar assignments.
},
]);
onMounted(async () => {
// Making an API call using the Supabase client, given that we utilize their service.
let { data: rows, error } = await supabase.from("submissions").select("*").order("date_submitted", { ascending: false });
if (error) {
console.log(error);
return;
}
data.value = rows;
});
return {
data,
entries,
};
},
};
</script>
I've also attempted using beforeRouteEnter and onBeforeMounted, but without success.