Bootstrap Vue + Nuxt JS модальная задача внутри v-for - PullRequest
Новая
       38

Bootstrap Vue + Nuxt JS модальная задача внутри v-for

0 голосов
/ 23 февраля 2019

Я создаю приложение типа "Trello", в котором у меня есть доски, списки и карты, а данные сохраняются в базе данных реального времени в Firebase для тестирования.

Я использую Bootstrap Vue's модалы для переключения видимости.Тем не менее, у меня проблема ...

Для начала у меня есть <b-modal> в карточке начальной загрузки, которая имеет v-for, которая выбирает список карточек из списка списков, которые находятся вдоски.И я хочу показать данные карты после щелчка по модалу, и если я нажму другую карту, то она будет использовать тот же элемент <b-modal>, но отобразит другие данные.

В моей реализации я, кажется, вызываюa 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 есть еще кое-что, однако я только прилагаю то, что относится к разметке выше.

Любые предложения о том, что я делаю неправильно и как это исправить?

enter image description here

большое спасибо!

1 Ответ

0 голосов
/ 25 февраля 2019

Я бы скорее согласился с @ 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");
    }
  }
};

Демо

...