In the scenario where there is a parent component labeled as "1" with two child components named "2" and "3", each of these components containing its own child component, "4" for "2" and "5" for "3", the challenge arises on how to pass state from child component "5" to the last component "4". Is it recommended to utilize the composables approach in this situation? Can you provide an example demonstrating how this can be achieved?
Forget about Pinia, you can easily create a "store" like this:
// in a new file named storeName.js
import { ref } from 'vue'
export const myStore = ref('')
Then simply import myStore into any component where it's needed, whether to update it (e.g. in component 5) or just to check its value (e.g. in component 4). Any changes made to myStore will automatically update across all components. That's all there is to it!
When your components are specifically designed to work together, there is a conventional method for passing data within a component hierarchy:
https://vuejs.org/guide/components/provide-inject
This approach offers more flexibility compared to using a store or shared module variable (as suggested by Nobsyde), as you can easily swap the topmost component with another one that provides the same data, allowing all descendant components to interact seamlessly. It's essential for components to agree on what data they will share through injection.
You have the option to set default values for injected data, enabling your components to function independently from the hierarchy or adjust their behavior based on the provided data. This makes your components context-sensitive.
An alternative method to facilitate data sharing among sibling components is through scoped slots: How to use data from one component in another component vuejs
Creating a form to collect information about multiple persons can be challenging. Let's say we have 3 people to gather info on, and we need to structure the data in JSON format like this: { persons[0].surname: '', persons[0].name: &apos ...
Within my index.js file, I have the following code: const store = createStore( combineReducers({ i18n: i18nReducer }), applyMiddleware(thunk) ); syncTranslationWithStore(store) store.dispatch(loadTranslations(translationsObject)); stor ...
Exploring the latest features of Vue (version 3.2) has been quite exciting for me. I recently developed a useFetch composable to leverage reusability based on the vue documentation. useFetch.js import { ref } from 'vue' import axios from ' ...
I am currently developing a web framework and focusing on integrating XSS prevention measures. I have successfully implemented data escaping for database storage, but now I am faced with the challenge of allowing users to save generated HTML without riskin ...
Exploring the realms of Next.js and Typescript for a new project! My goal is to utilize next.js with typescript and tailwind CSS by simply entering this command: npx create-next-app -e with-tailwindcss my-project Smooth sailing until I hit a snag trying t ...
In my NodeJS application using Express, I currently have a hardcoded method for handling URL POST Request Calls and responding with JSON Files. This means that every time I need to add more POST Request Inputs or specify which JSON File to use, I have to m ...
In my current scenario, I am looking to pass a portion of a complex object to an Angular component. <app-component [set]="data.set"></app-component> I want the 'data.set' object in the parent class to always mirror the 'set&apo ...
Working with Bootstrap 3, a custom div has been created as shown below: <div class="second-para"> <div class="container"> <div class="second-section"> <div class="c ...
My parent component structure is as follows: import React from "react"; import Test from "./Test"; function App() { const [configs, setConfigs] = React.useState([1, 2, 3]) return ( <div> ...
I am facing an issue with swapping values in two dropdowns. The scenario is that I have a dropdown with minimal values and another one with maximum values. If a value selected in the first dropdown is greater than the value in the second dropdown, they nee ...
Question: Dynamically creating keys in javascript associative array Typically, we initialize an array like this: var ar = ['Hello', 'World']; To access its values, we use: alert(ar[0]); // Hello However, I am looking to assign ...
I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...
I am currently facing a challenge in rendering a React component that includes data fetched from a JSON using the fetch() method. Although the API call is successful, I am experiencing difficulties in displaying the retrieved data. Below is the code snip ...
In my React app, the App component checks for a token in local storage upon loading. If a token is found, it is verified. If the token is valid, the user is directed to the dashboard; otherwise, they are taken to the login page. The issue I am facing is ...
Can you help with where to specify my license key in Storybook? I need guidance on where to set the license key in Storybook. According to MUI Docs, it should be done before React renders the first component and only once in the application. However, I ...
I'm a newcomer to Vue Js and encountering an issue with changing data values from another component. Let's start with Component A: <template> <div id="app"> <p v-on:click="test ()">Something</p> </div> ...
In my project, I have implemented 3 Vue components to work together seamlessly. Component A is responsible for listening to an event triggered by a user clicking on HTML text and storing the data into a variable. Component B utilizes this data to make an A ...
I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...
Hi there, I am fairly new to working with nodeJS and I have encountered an issue that I suspect lies within the second if statement inside "db.query..." in the code provided below. An error message showing ERR_HTTP_HEADERS_SENT]: Cannot set headers after ...
Is there a simple way to make all clickable elements inside a div read only? For example, in the provided HTML code, these divs act like buttons and I want to disable them from being clicked. Any tips or shortcuts to achieve this? Thank you. #html < ...