Updating props before binded
In this project, form controls have permissions that are received from call to an API endpoint.
I have somewhat gotten this concept right, however, the permission only seems to be applied on a re-render.
A "screen-key" is sent to the backend, the backend returns with an array of screen-keys (for form controls) and applies related permissions (AKA availability). Eg. disable, readonly, hidden, etc.
I have a custom form component that takes a screen-key as a prop. If this screen key exists, it fetches the data from the backend and stores it in a hashmap. The form component uses "provide" to provide it's own screenkey to any child form control components.
Using "inject", a form control gets the parent's screenkey and, along with its own screenkey via props, queries a pinia store for its availability. This availability is returned, ammended to props (
amendedProps = {...props, ...availability}) to which this is v-binded to the form control. (I have also tried using computed)
The problem, however, is that while this does work, it does not work on the first render. It seems that it needs to be re-rendered for it to take effect and I'm not sure how to fix this.2 Replies
Hi @Kernel Panic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your question about updating props before binding in Nuxt. However, I can offer some general insights and suggestions based on Nuxt and Vue.js behavior that may be relevant to your issue:
1. Reactivity and Timing: The problem you're experiencing with props not updating on the first render but working on subsequent renders is likely related to the timing of when the data becomes available and when the components are rendered.
2. Asynchronous Data Fetching: Since you're fetching data from an API, it's important to ensure that the data is available before rendering the components that depend on it. You might want to consider using Nuxt's
useFetch or useAsyncData composables to handle asynchronous data fetching.
3. Computed Properties: Using computed properties for derived values can help ensure reactivity. If you haven't already, you might want to try using a computed property for your amendedProps.
4. Watchers: You could use a watcher to react to changes in the fetched data and update your components accordingly.
5. Lifecycle Hooks: Make sure you're using the appropriate lifecycle hooks. In Nuxt 3, you should avoid code that produces side effects that need cleanup in the root scope of <script setup>. Instead, move such code into onMounted or other appropriate lifecycle hooks.
6. SSR Considerations: If you're using SSR (Server-Side Rendering), be aware that some Vue lifecycle hooks like onBeforeMount, onMounted, and subsequent hooks are not executed during SSR. This could affect how and when your data is available.
To potentially resolve your issue, you might want to:
1. Ensure that your data fetching is completed before rendering the components that depend on it.
2. Use nextTick() or a similar mechanism to force a re-render after the data is available.
3. Consider using watch or watchEffect to react to changes in your fetched data.
If these suggestions don't solve your problem, you might need to provide more specific code examples or details about your implementation for a more targeted solution.
Nuxt Lifecycle documentation might be helpful for understanding the order of operations in Nuxt applications.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@246664150514663425> Kapa.ai is still learning and improving, please let me know how I did by reacting below.