时间戳

首页 > 解决方案 > 如何在循环Vue中为每个孩子设置不同的状态变量

javascript - 如何在循环Vue中为每个孩子设置不同的状态变量

问题描述

我在下面的代码片段中的状态使用存在以下问题。

<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>

所以基本上，我需要做的就是从其负责的卡中触发一个模态。我只是有点很难解决这个问题。我目前的方法是上面的代码。

但我知道问题会出现，modalStrategies许多组件正在使用数据状态。因此，即使我只点击了一张卡片，他们也喜欢快速更改所有现有的模式。

我该如何解决这个问题？有什么解决方法吗？

谢谢大家！谢谢。我非常感谢您为尝试理解我的问题所做的努力。

标签： javascriptvue.js

解决方案

<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
    }
}

推荐阅读