Sharing state among multiple instances of the same Vue3 Component using the Composition API

I've been diving into the world of Vue 3 and exploring the Composition API, but I'm struggling to get multiple instances of the same component to work properly.

<Loader />
<Loader />
<Loader />

In my Loader.vue file:

export default {
    data() {
        return {
            status: null
        }
    }
}

Currently, when the first Loader finishes and sets its status, all other <Loader /> components behave as expected.

However, when using the Composition API like this, the first completed Loader sets the status for all subsequent instances instead of each instance having its own independent variable.

const status = ref(null)

How can I achieve the desired behavior in Vue 3 with the Composition API?

I came across an older question regarding a similar issue, but it doesn't address the problem specifically for the Composition API. It seems to be related to managing the state of the components. Even the official documentation hasn't provided much insight on this matter.

vue.jsvuejs3vue-composition-api

Answer №1

It seems like you may not be correctly passing the status into the Loader component. Each Loader instance should have a status property defined like this:

<Loader :status="status"/>
<Loader :status="status"/>
<Loader :status="status"/>

In the Loader component, make sure to declare the props for status as follows:

const props = defineProps(['status']);

By updating the status in the parent component, it should automatically update all instances of Loader.

If this isn't the issue you're facing, another common problem when using multiple elements with the same name is the lack of a unique identifier. To solve this, you can use unique keys like so:

<Loader :status="status" key="1"/>
<Loader :status="status" key="2"/>
<Loader :status="status" key="3"/>

This issue typically arises in foreach loops but could potentially be causing problems in your current scenario as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming API Response into a structured format to showcase a well-organized list

When I make an API call for a list of properties, the data comes back unorganized. Here is how the data from the API looks when stored in vuex: posts:[ { id: 1; title: "Place", acf: { address: { state: "Arkansas", ...

javascriptjsonvue.jssortingvuejs2

Modifying Parent Component Layout Using Vue.js

I am currently in the process of converting a UI element into a component for the purpose of reuse. This particular element consists of two buttons that toggle the visibility of two DOM elements within the parent app. The state of these buttons is stored i ...

javascriptvue.jsvue-component

Error: The VueComponent.onResize function encountered an uncaught TypeError because it cannot read the property 'offsetHeight' of an undefined variable

<div ref="controls" class="varie controls"> <div class="control" v-if="spin!='"> <span>Saved datee</span><span>{{ }}</span> </div> <button v-on:click="apply()">Aopply</button> </div& ...

vue.js

What steps can I take to prevent the [Vue warn]: Potential infinite update loop detected in a component render function issue in my VueJS project?

What are some tips to prevent an infinite update loop in a component render function using VUEJS? I have created a simple show password button with the following structure: <div class="mt-4 switchContainerGenPassword"> <div class="switchGene ...

javascriptvue.js

RxJS operators should not be confused with regular functions

I am encountering an issue when attempting to utilize rxjs in vue with vue-rx and rxjs together. [Vue warn]: Error in created hook: "TypeError: messageObservable.fromEvent(...).map(...).debounceTime is not a function" After reviewing the documentation, I ...

vue.jsrxjsobservable

Nuxt.js static pages with relative URLs

I am currently working on developing static pages with Nuxt.js (MPA). After executing the generate command, I noticed that all the URLs in the <nuxt-link> tag start from the root directory, specifically /. For instance, my project structure looks lik ...

javascriptvue.jsnuxt.js

Tips for avoiding the push method from replacing my items within an array?

Currently, I am diving into Typescript and VueJS, where I encountered an issue with pushing elements to my array. It seems to constantly override the 'name' property. Let me share the code snippet causing this problem: const itemsSelectedOptions ...

javascripttypescriptvue.js

What is the best way to display HTML code using Vue syntax that is retrieved from an Axios GET request

I am currently working on a project that involves a Symfony 5 and Vue 3 application. In this setup, a Symfony controller creates a form and provides its HTML through a JSON response. The code snippet below shows how the form HTML is returned as a string: i ...

javascriptvue.jssymfonyvuejs3

``What is the best way to set up the Vue app based on the initial back-end response?

I'm in need of a way to run some code before any other functionality in my app is executed. This code needs to send a request to the back-end and update the store first, as route guards depend on it. How can I achieve this? Code Example Fetching user ...

apivue.jsvuexsettingsguard

Running a function in a different vue file from an imported file - A step-by-step guide

Learning the ropes of vue.js, I am working with two separate vue files: First file: import second from second.vue; export default{ component: {second}, data() {return{ data: 'data', }} methods: { function f1{ console.log(t ...

vue.js

Setting the content-type for static assets in NuxtJS

I'm trying to use the Nuxt built-in server to serve the static file /.well-known/apple-app-site-association with a content-type of application/json. Unfortunately, because the file does not have a .json extension, it is returning as application/octet- ...

javascriptnode.jsvue.jsnuxt.js

Silent response upon click event listener

I'm having an issue with a navbar item not calling the reverseService function on click as expected. Although my IDE is indicating that the reverseService function is never used, VueJS dev tool doesn't show any problems. However, manually changi ...

javascriptvue.js

When trying to import a Vue template snippet, you may encounter a message indicating a promise object

I'm facing a challenge in my project where I need to dynamically include a template snippet from another file into my Single File Component (SFC) template. However, instead of the expected markup, all I see is [Object Promise]. It seems that this issu ...

vue.jsvuejs2promise

How can I interact with a v-dialog component within a child component in Vue.js using Vuetify?

Exploring Vue.js for the first time and hoping to display a login dialog upon button click. To maintain cleanliness in my code, I shifted the dialog to a child component within a parent component with nested LoginDialog. Below are snippets of the parent co ...

javascriptvue.jsdialogvuetify.js

Achieving reactivity in Vue when pushing elements into a dynamically-sized array

I am in need of a two-dimensional array that can have dynamic keys and an array of objects pushed to it. I have tried using this.$set and Vue.set without any success so far. data() { rep_recs: [] , // I want this array to be reactive so that I can displ ...

vue.jsvuejs2

Tips for achieving a seamless user experience with Vue-bootstrap popovers

My Vue application consists of multiple cards, each displaying a button when hovered over. Additionally, hovering over the button triggers a popover to appear. However, I am experiencing issues with the popover behavior - it blinks when attempting to acces ...

vue.jsbootstrap-4popoverbootstrap-vue

I am attempting to utilize the fetch API method to initialize the store's state, but for some reason, it is not functioning properly

Within my store.js file, I have a state called user_data, with its initial method set to fetch_user_data: export default new Vuex.Store({ state: { user_data: util.fetch_user_data('username') ... } located in the util.js file: util. ...

javascriptvue.jsvuex

Incorporating innerHTML with Vue.js

On the filter page, there is a functionality to toggle between different content options. | Filter | | content | Initially, the content displayed is in Ruby. When a filter is selected, the Ruby template should be hidden and replaced with content fetched ...

vue.jsvuejs2vue-componentvuex

Exploring Array Iteration: Navigating through Arrays with the .map Method in React and Vue

I am currently using Vue after coming from a React background. In React, there is a method called .map that allows you to render a component multiple times based on the number of items in an array and extract data from each index. Here's an example: f ...

javascriptarraysreactjsvue.jsvuejs2

What are some creative ways to design the selected tab?

In my Vue parent component, I have multiple child components. There are several elements that toggle between components by updating the current data. The issue is that I am unsure how to indicate which tab is currently active. I've tried various li ...

javascripthtmlcssvue.js