автономный Vue JS: передать данные в модальный компонент

Question

Здравствуйте. У меня вопрос по поводу передачи данных в модальный компонент с помощью автономного Vue js.Поток - это нажатие пользователем кнопки «выбрать страну», и открывается модальное окно, и пользователь может выбрать страну с помощью ползунка.как только пользователь нажал подтвердить, модальное закрытие.

Я пытался использовать циклы for для передачи данных в модальные компоненты, но он также распечатывал много кнопок.

Спасибо за вашу помощь

У меня есть HTML-код, по которому пользователь может выбрать страны

<div class="select_championship_country" @click="enableCountryModal()">Select a country</div>
<modal v-if="showCountryModal" @close="showModal = false"></modal>

Вот код модального компонента:

 <!-- countury modal -->
        <script type="text/x-template" id="modal-template">
            <transition name="modal">
              <div class="modal-mask">
                <div class="modal-wrapper">
                  <div class="modal-container">
                    <div class="modal-header">
                      <slot name="header">
                        select the country you want to support
                      </slot>
                    </div>

                    <div class="modal-body">
                      <slot name="body">
                        <div class="country_select_carousel">
                          <div class="countrySlide">
                            <!-- <img :src="imgUrl + '/flags/' + item.imgName"> -->
                          </div>
                        </div>
                      </slot>
                    </div>

                    <div class="modal-footer">
                      <slot name="footer">
                        <div class="modal-default-button" @click="$emit('close')">
                          confirm
                        </div>
                      </slot>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </script>

Это объект массива данных страны и модальный компонент

new Vue({
  el: '#root',
  components: {
    modal: {
      template: '#modal-template',
    }
  },
  data: {
    country_carousel_data: [
      {
        imgName: 'brasil.svg',
        desc: 'brasil',
      },
      {
        imgName: 'canada.svg',
        desc: '',
      },
      {
        imgName: 'egypt.svg',
        desc: '',
      },
      {
        imgName: 'france.svg',
        desc: '',
      },
      {
        imgName: 'germany.svg',
        desc: '',
      },
      {
        imgName: 'india.svg',
        desc: '',
      },
      {
        imgName: 'poland.svg',
        desc: '',
      },
      {
        imgName: 'portugal.svg',
        desc: '',
      },
      {
        imgName: 'tunisia.svg',
        desc: '',
      },
      {
        imgName: 'turkey.svg',
        desc: '',
      },
      {
        imgName: 'uk.svg',
        desc: '',
      },
      {
        imgName: 'usa.svg',
        desc: '',
      },
    ],
 }

Answer 1

Где вы использовали цикл for в вашем модальном шаблоне?Я не вижу никакой v-for.

Вы не должны быть внутри для цикла.Я предполагаю, что, поскольку вы упомянули, он печатает много кнопок, которые у вас были внутри цикла.v-for должен быть на тэге, как показано ниже

<script type="text/x-template" id="modal-template">
            <transition name="modal">
              <div class="modal-mask">
                <div class="modal-wrapper">
                  <div class="modal-container">
                    <div class="modal-header">
                      <slot name="header">
                        select the country you want to support
                      </slot>
                    </div>

                    <div class="modal-body">
                      <slot name="body">
                        <div class="country_select_carousel">
                          <div class="countrySlide">

                           <img v-for="item in country_carousel_data" :src="imgUrl + '/flags/' + item.imgName"> 
                          </div>
                        </div>
                      </slot>
                    </div>

                    <div class="modal-footer">
                      <slot name="footer">
                        <div class="modal-default-button" @click="$emit('close')">
                          confirm
                        </div>
                      </slot>
                    </div>
                  </div>
                </div>
              </div>
            </transition>
          </script>