Firebase v-for内部的引导Vue+Nuxt JS模式问题

我正在构建一个类似Trello的应用程序，通过该应用程序，我有板、列表和卡片，数据保存到Firebase中的实时数据库中进行测试

我正在使用引导Vue切换可见性。然而，我遇到了一个问题

首先，我有一个内置的引导卡，它有一个v型，从板中的列表中获取一个卡列表。我想在模式中单击后显示卡的数据，如果单击另一张卡，它将使用相同的元素，但显示不同的数据

在我的实现中，我似乎导致超过了最大调用堆栈大小，并导致浏览器崩溃5000多次以上，这看起来不太好：D

我做了一些调试，并尝试使用返回false的方法；为了找出实际发生的情况，模态会显示出来，但是当取消模态时，模态会再次直接弹出，从而导致错误

下面，我附上相关代码和JS：

HTML标记

JS还有更多内容，但是我只附加了与上面的标记相关的内容

有没有关于我做错了什么以及如何修复的建议

---

非常感谢

我更同意@Andrew1325的观点，他指出，例如，创建一个模态对话框实例并传递所选数据可能是一个更好的选择

 <div>
    <div v-for="(item) in items" :key="item.id">
      <b-card
        :title="item.title"
        :img-src="item.imageUrl"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>{{item.text}}</b-card-text>

        <b-button variant="primary" @click="showModal(item)">Show details</b-button>
      </b-card>
    </div>
    <b-modal id="modal1" :title="selectedItem.title">
      <img style="max-width: 20rem;" :src="selectedItem.imageUrl"/>
      <p class="my-4">{{selectedItem.text}}</p>
    </b-modal>
</div>



export default {
  data() {
    return {
      selectedItem: {},
      items: [
        {
          id: 1,
          title: "First",
          imageUrl : "https://picsum.photos/600/300/?image=23",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        },
        {
          id: 2,
          imageUrl : "https://picsum.photos/600/300/?image=24",
          title: "Second",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        },
        {
          id: 3,
          imageUrl : "https://picsum.photos/600/300/?image=25",
          title: "Third",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        }
      ]
    };
  },
  methods: {
    showModal(item){
      this.selectedItem = item;
      this.$root.$emit("bv::show::modal", "modal1");
    }
  }
};

---

您可能不应该在v-for中使用模态。如果您将它放在html的顶部，您可以在v-for中有一个@click事件，该事件将所需的数据传递给模态并打开它。

export default {
  data () {
    return {
      id: this.$route.params.id,
      board: [],
      cards: [],
      lists: [],
      listname: '',
      cardname: '',
      editedFields: {}
    }
  },
  created() {
    this.$http.get('myfirebaseurl/boards/' + this.id + '.json').then(response => {
      this.board = response.body
    }, response => {
      // handle error for fetching property data.
    });
  },
  methods: {
    modalId(index) {
      return 'modal' + index;
    }
  }
}

 <div>
    <div v-for="(item) in items" :key="item.id">
      <b-card
        :title="item.title"
        :img-src="item.imageUrl"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>{{item.text}}</b-card-text>

        <b-button variant="primary" @click="showModal(item)">Show details</b-button>
      </b-card>
    </div>
    <b-modal id="modal1" :title="selectedItem.title">
      <img style="max-width: 20rem;" :src="selectedItem.imageUrl"/>
      <p class="my-4">{{selectedItem.text}}</p>
    </b-modal>
</div>



export default {
  data() {
    return {
      selectedItem: {},
      items: [
        {
          id: 1,
          title: "First",
          imageUrl : "https://picsum.photos/600/300/?image=23",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        },
        {
          id: 2,
          imageUrl : "https://picsum.photos/600/300/?image=24",
          title: "Second",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        },
        {
          id: 3,
          imageUrl : "https://picsum.photos/600/300/?image=25",
          title: "Third",
          text: "Some quick example text to build on the card title and make up the bulk of the card's content"
        }
      ]
    };
  },
  methods: {
    showModal(item){
      this.selectedItem = item;
      this.$root.$emit("bv::show::modal", "modal1");
    }
  }
};