Javascript Nuxt.js/Vue.js可恢复模式

我的问题是关于以下内容的核心逻辑

1） 我有一个节组件和一个模态组件

2） 在Section组件中，我有一个带有标题和描述的对象数组

3） 在模态组件中，我有一个用于模态的模板（im使用Bulma框架用于模态）

现在，在这一节中，我有7个带有v-for循环的按钮，用于分配“is active”类，在每个按钮上单击一个单独的模式打开

问题：如何将数据解析为模态？我希望我的模式是可重用的。所以一开始我的模态是空的。在按钮1上单击“我有标题1说明1”，在按钮2上单击“标题2说明2”，等等

我的代码：

部分组成：

<template>
<base-section name="clusters">

  <div class="section-map"> 
    <button
    class="section-btn"
    v-for="(item, index) in sectionItems"
    :key="index"
    :class="[`section-btn-num${index + 1}`, {'is-active': item.state}]"
    @click="toggleModal(item)" 
    >
      <div class="section-btn__text">
        {{ item.title }}
    </div>
    </button>
  </div>

  <div class="modal"
  v-for="(item, index) in sectionItems"
  :key="index"
  :class="{'is-active': item.state}"
  >
  <div class="modal-background"></div>
  <div class="modal-content">
  </div>
  <button 
  @click="item.state = false"
  class="modal-close is-large" 
  aria-label="close">
  </button>
</div>

</base-section>
</template>

<script>
import BaseSection from './Section';
import BaseModal from './Modal';
export default {
  components: {
    BaseSection,
    BaseModal,
  },

  methods: {
    toggleModal: (item) => {
      item.state = !item.state;
    }

  },
  data() {
    return {
      sectionItems: [
        {
          title: 'title1',
        },
        {
          title: 'title2',
          description: 'descr',
        },
        {
          title: 'title3',
          description: 'descr',
        },
        {
          title: 'title4',
          description: 'descr',
        },
        {
          title: 'title5',
          description: 'descr',
        },
        {
          title: 'title6',
          description: 'descr',
        },
        {
          title: 'title7',
          description: 'descr',
        },

      ].map(item => ({ ...item, state: false }))
    };
  }
};
</script>

<styles>
/* are skipped */
</styles>

<template>
  <div class="modal">
      <div class="modal-background"></div>
      <div class="modal-content">

        <div class="modal__header">
          <slot name="modal__header">

          </slot>
        </div>

        <div class="modal__body">
          <slot name="modal__body">

          </slot>
        </div>

      </div>
      <button 
      @click="item.state = false"
      class="modal-close is-large" 
      aria-label="close">
      </button>
  </div>
</template>

<script>
import ClustersSection from './ClustersSection';
export default {
  components: {
    ClustersSection,
  },
  props: {
    }
  },
};
</script>

<style lang="scss">
</style>

{{item.title}
从“./Section”导入BaseSection；
从“/Modal”导入BaseModel；
导出默认值{
组成部分：{
基节，
BaseModal，
},
方法：{
toggleModal：（项目）=>{
item.state=！item.state；
}
},
数据（）{
返回{
章节项目：[
{
标题：“标题1”，
},
{
标题：“标题2”，
描述：'descr'，
},
{
标题：“标题3”，
描述：'descr'，
},
{
标题：“标题4”，
描述：'descr'，
},
{
标题：“标题5”，
描述：'descr'，
},
{
标题：“标题6”，
描述：'descr'，
},
{
标题：“标题7”，
描述：'descr'，
},
].map（项=>（{…项，状态：false}））
};
}
};
/*跳过*/

模态分量：

<template>
<base-section name="clusters">

  <div class="section-map"> 
    <button
    class="section-btn"
    v-for="(item, index) in sectionItems"
    :key="index"
    :class="[`section-btn-num${index + 1}`, {'is-active': item.state}]"
    @click="toggleModal(item)" 
    >
      <div class="section-btn__text">
        {{ item.title }}
    </div>
    </button>
  </div>

  <div class="modal"
  v-for="(item, index) in sectionItems"
  :key="index"
  :class="{'is-active': item.state}"
  >
  <div class="modal-background"></div>
  <div class="modal-content">
  </div>
  <button 
  @click="item.state = false"
  class="modal-close is-large" 
  aria-label="close">
  </button>
</div>

</base-section>
</template>

<script>
import BaseSection from './Section';
import BaseModal from './Modal';
export default {
  components: {
    BaseSection,
    BaseModal,
  },

  methods: {
    toggleModal: (item) => {
      item.state = !item.state;
    }

  },
  data() {
    return {
      sectionItems: [
        {
          title: 'title1',
        },
        {
          title: 'title2',
          description: 'descr',
        },
        {
          title: 'title3',
          description: 'descr',
        },
        {
          title: 'title4',
          description: 'descr',
        },
        {
          title: 'title5',
          description: 'descr',
        },
        {
          title: 'title6',
          description: 'descr',
        },
        {
          title: 'title7',
          description: 'descr',
        },

      ].map(item => ({ ...item, state: false }))
    };
  }
};
</script>

<styles>
/* are skipped */
</styles>

<template>
  <div class="modal">
      <div class="modal-background"></div>
      <div class="modal-content">

        <div class="modal__header">
          <slot name="modal__header">

          </slot>
        </div>

        <div class="modal__body">
          <slot name="modal__body">

          </slot>
        </div>

      </div>
      <button 
      @click="item.state = false"
      class="modal-close is-large" 
      aria-label="close">
      </button>
  </div>
</template>

<script>
import ClustersSection from './ClustersSection';
export default {
  components: {
    ClustersSection,
  },
  props: {
    }
  },
};
</script>

<style lang="scss">
</style>

从“/ClustersSection”导入ClustersSection；
导出默认值{
组成部分：{
聚类分析，
},
道具：{
}
},
};

因为您已经在组件中定义了插槽，所以可以通过将数据传递给它。例如

标题bla bla a
这里有什么东西吗