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

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

1 个答案: