kāné
kāné
PostsComments
NNuxt
Created by kāné on 11/29/2024 in #❓・help
Issue with Vue 3 + Nuxt 3 useFetch Data Not Displaying in Template
Background I’m building an app using Nuxt 3 and Vue 3 (Node v20.18.0). I’m running into a fundamental issue with template reactivity when trying to display data fetched with useFetch. Specifically: - I can log the data from useFetch in <script setup>, and the data is correct. - However, when binding to the fetched data in the template, the expected reactivity doesn’t occur. - Some solutions work (like wrapping the data in computed), but they feel unnecessary for something as fundamental as this. What I’ve Tried 1. Debugging Data Reactivity 
console.log("Data:", data.value); 
console.log("Title:", data.value.title);
console.log("Data:", data.value); 
console.log("Title:", data.value.title);
- These logs always show the correct data and title values. 2. Providing Default Values 
const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });
const { data } = await useFetch('/api', { default: () => ({ title: 'Untitled' }) });
- Ensures data.value is initialized, but this doesn’t fix the template reactivity for data.value.title. 3. Optional Chaining in the Template 
<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>
<p v-else>Title: {{ data?.value?.title || 'No title available' }}</p>
- Prevents errors but still doesn’t display the title, even though <pre>{{ data }}</pre> confirms it exists. 4. Using computed 
const computedData = computed(() => data.value);
const computedData = computed(() => data.value);
- This works, and the title renders correctly when accessed as computedData.title. Questions 1. Why is template reactivity for data.value.title failing? - This seems like a fundamental part of Vue’s reactivity system, so I’m not sure why I need computed for it to work. 2. Is this an issue with Nuxt’s useFetch? - Could Nuxt be optimizing reactivity in a way that breaks expected behavior for deep properties? 3. Am I misusing useFetch? - Is there a better way to fetch data in Nuxt 3 to avoid this issue entirely? 4. Is this a known issue? - I couldn’t find documentation addressing this specific behavior. Should I file a bug report?
6 replies
NNuxt
Created by kāné on 11/27/2024 in #❓・help
Nuxt Dynamic Route Issue: ID Switching to 'preload.js.map' Unexpectedly
I have a very simple dynamic route. The page is in the following directory: ~/pages/explore/initiative/[id].vue When I navigate to that page via NuxtLink, it seems to be making the request several times. I added the following code to [id].vue to verify if this is the case 
const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);
const route = useRoute()
const initiativeId = route.params.id;
console.log("Route Params: ", route.params.id);
Here's an example of the output 
Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map
Route Params:  18

 WARN  [@vue/server-renderer] Skipped rendering unsafe attribute name: "

Route Params:  preload.js.map
So it seems that the ID is being switched to preload.js.map. I didn't write any code to that switch, so it seems to be the framework making the request or some other package included within. Not sure if this is relevant, but there's also an index.vue page in ~/pages/explore/initiative/index.vue
6 replies