Setting individual state variables for each child component within a Vue loop

Question

Setting individual state variables for each child component within a Vue loop

When I look at the code snippet below, I find myself facing an issue with state usage.

<div class="featured-card-container">
        <swiper class="swiper" :options="swiperOption">
            <template v-for="(strategy, index) in strategiesCards">
                <swiper-slide :key="'slider-' + index">
                    <strategy-card
                        :data="strategy"
                        @click.native="showModalStrategies()"
                    />
                </swiper-slide>
                <strategies-modal
                    :key="'modal-' + index"
                    :dialog.sync="modalStrategies"
                    :data="strategy"
                />
            </template>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>

The main challenge here is triggering a modal from its corresponding card. Figuring out how to accomplish this effectively has been quite daunting for me.

The current strategy implemented in the above code seems to be causing issues because the data state modalStrategies is shared across multiple components. This results in all existing modals being quickly changed even if only one card is clicked.

I'm seeking guidance on how to resolve this dilemma. Are there any workarounds or solutions that could address this issue effectively?

Thank you to everyone who takes the time to understand and provide input on my situation. Your efforts are truly appreciated.

javascript vue.js

Answer 1

Answer №1

<template v-for="(plan, number) in plansList">
    <swiper-slide :key="'slide-' + number">
        <plan-card
            :data="plan"
            @click.native="displayModalPlan(plan)"
        />
    </swiper-slide>
    <plan-modal-dialog
        :key="'dialog-' + number"
        :dialog.sync="isShowDialog"
        :data="plan"
    />
</template>

data() {
    return {
        modalPlan: null,
        currentPlan: null
    }
},
computed: {
    isShowDialog: {
        get() {
            return this.modalPlan === this.currentPlan
        },
        // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
        set(value) {
            if(!value) {
                this.modalPlan = null
            }
        }
    }
},
methods: {
    displayModalPlan(plan) {
        this.currentPlan= plan
        this.modalPlan = plan
    }
}

Answer 2

<template v-for="(plan, number) in plansList">
    <swiper-slide :key="'slide-' + number">
        <plan-card
            :data="plan"
            @click.native="displayModalPlan(plan)"
        />
    </swiper-slide>
    <plan-modal-dialog
        :key="'dialog-' + number"
        :dialog.sync="isShowDialog"
        :data="plan"
    />
</template>

data() {
    return {
        modalPlan: null,
        currentPlan: null
    }
},
computed: {
    isShowDialog: {
        get() {
            return this.modalPlan === this.currentPlan
        },
        // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier
        set(value) {
            if(!value) {
                this.modalPlan = null
            }
        }
    }
},
methods: {
    displayModalPlan(plan) {
        this.currentPlan= plan
        this.modalPlan = plan
    }
}

Setting individual state variables for each child component within a Vue loop

Answer №1

Similar questions

Utilizing the jQuery index for organizing JSON keys

The task "default" is not found within your current gulpfile configuration

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

Enhancing AG-Grid with live data updates post drag and drop interaction

Enable a VueJS directive on-the-fly from a separate directive

Display a div with a link button when hovering over an image

Ember controller failing to update template upon property set within promise execution

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

Encountering intellisense problems while declaring or utilizing TypeScript types/interfaces within Vue.js Single File Component (SFC) documents

How can I extract just the initial 2 letters of a country name using AmCharts maps?

Obtaining undefined values for req and resolvedUrl in GetServerSideProps function

selenium tutorial: Testing tooltip functionality with Python

What is the best way to trigger the ajax request with the same post parameter upon pressing the browser's back button?

Tips for restricting camera movement in threejs

Showing the initials of a user at the top of an SVG using ReactJS

Firestore query is not displaying the expected data, resulting in an empty array being returned

Tips for efficiently transferring a retrieved object from App.js to a child component in ReactJS version 16 and above using asynchronous methods

Raspberry Pi encountering a TypeError with Node.js async parallel: "task is not a function" error

Transferring information from Vue Component to Vuex storage

How come TypeScript remains silent when it comes to interface violations caused by Object.create?