Tengo el siguiente problema con el uso del estado en el siguiente fragmento de código.
<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>Básicamente, todo lo que necesito es activar un modal desde su tarjeta responsable. Es solo que me está costando mucho resolver esto. Mi enfoque actual es el código anterior.
Pero sé que el problema vendría, el estado de datos de modalStrategies está siendo utilizado por muchos componentes. Por lo tanto, les gusta cambiar rápidamente todos los modales existentes, incluso si hice clic en una sola tarjeta.
¿Cómo puedo arreglar esto? ¿Hay algún trabajo alrededor?
Muchísimas gracias a todos. Realmente aprecio tu esfuerzo por tratar de entender mis problemas.
<template v-for="(strategy, index) in strategiesCards"> <swiper-slide :key="'slider-' + index"> <strategy-card :data="strategy" @click.native="showModalStrategies(strategy)" /> </swiper-slide> <strategies-modal :key="'modal-' + index" :dialog.sync="isShowModal" :data="strategy" /> </template> data() { return { modalStrategy: null, currentStrategy: null } }, computed: { isShowModal: { get() { return this.modalStrategy === this.currentStrategy }, // https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier set(val) { if(!val) { this.modalStrategy = null } } } }, methods: { showModalStrategies(strategy) { this.currentStrategy= strategy this.modalStrategy = strategy } }