v-for 内部的 Bootstrap Vue + Nuxt JS 模态问题

Question

我正在构建一个类似“Trello”的应用程序，其中我有板、列表和卡片，并且数据被保存到 Firebase 中的实时数据库中以供测试。

我正在使用 Bootstrap Vue 的 modals 来切换可见性。但是，我遇到了一个问题......

首先，我的 <b-modal> 在 Bootstrap 卡中，该卡有一个 v-for，它从板上的列表列表中获取卡列表。我想在模式中单击后显示卡片的数据，如果我单击另一张卡片，它将使用相同的 <b-modal> 元素但显示不同的数据。

通过我的实现，我似乎导致了 Maximum call stack size exceeded 并且实际上它错误 5,000 多次使浏览器崩溃，看起来不太好：D

我已经进行了一些调试，并尝试使用带有return false; 的方法来找出实际发生的情况，并且模态显示，但是当解除模态时，模态再次直接弹出，从而导致错误。

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

HTML 标记

<b-col md="4" v-for="(list, index) in board.lists" :key="list.id">
              <b-card bg-variant="light" header-tag="header" footer-tag="footer">
                <div slot="header" class="mb-0">
                  <b-row>
                    <b-col md="8">
                      <h4 class="mb-0"><b-form-input size="sm" class="mr-sm-2 input-is-editable" type="text" placeholder="Enter list name..." v-model="list.name" /></h4>
                    </b-col>
                  </b-row>
                </div>
                <b-card class="mb-3" v-for="(card, index) in list.cards" :key="card.id" v-b-modal.prevent="modalId(index)">{{ card.name }}
                  <b-modal :id="'modal' + index" hide-footer title="Using Component Methods">
                    <div class="d-block text-center">
                      <h3>{{ card.name }}</h3>
                    </div>
                    <b-button class="mt-3" variant="outline-danger" block>Close Me</b-button>
                  </b-modal>
                </b-card>
                <div slot="footer" class="mb-0">
                  <b-row>
                    <b-col>
                      <b-nav-form>
                        <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Enter card name..." v-model="cardname" />
                        <b-button size="sm" variant="success" class="my-2 my-sm-0" type="button" @click="addCard(index)" :disabled="!cardname">Add card</b-button>
                      </b-nav-form>
                    </b-col>
                  </b-row>
                </div>
              </b-card>
            </b-col>

JS

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

JS 还有更多内容，但我只附上与上述标记相关的内容。

关于我做错了什么以及如何解决的任何建议？

非常感谢！

Answer 1

我宁愿同意@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");
    }
  }
};

Demo