I have the following problem with state usage on below code snippet.
<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>
So basically, all I need to is triggering a modal from its responsible card. I just kind of having a hard time how to settle this. My current approach is the above code.
But I know the problem would come that, the modalStrategies data state is being used by many components. So it makes them like quickly changing all the existing modal even I clicked only one card.
How I can I fixed this? Is there any workaround?
Thank you so much everyone. I really appreciate your effort to try understanding my problems.
<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
}
}