Когда мы создаем boostrap5› и путаем передачу данных. Этот turorial поможет вам начать путь, как передать данные, которые вы выбираете из модального окна, в вашу функцию в vue3.

Прежде всего, мы ищем модальное окно, которое я создаю в html. Если вы не знаете, что такое модальный. Модальность — это встроенная функция в Boostrap, и когда пользователь нажимает кнопку, вместо того, чтобы перейти на другую страницу, в середине отображается окно сообщения со встроенным переполнением (черный прозрачный фон экрана). Я настоятельно рекомендую использовать «затухание» в классе, чтобы сделать его более современным. Он состоит из трех сессий [modal-header/modal-body/modal-footer]. Эти три не являются обязательными для вставки, насколько вы помните, чтобы вставлять их в сессию класса.

<div class="modal fade" id="choose_products" tabindex="-1" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content text-black">
            <div class="modal-header">
                <h4 class="modal-title"> Choose From Product</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="close">X</button>
            </div>
            <div class="modal-body">
                <th>STUDENT IN DATABASE:</th>
                <table class="table table-dark" >
                    <thead>
                    <tr>
                    <th scope="col"> tmp# </th>
                    <th scope="col"> StudntName </th>
                    <th scope="col"> StudentCode </th>
                    </tr>

                    </thead>

                    <tbody>
                    <tr class="" v-for="s, i in all_students"  @click.prevent="choosenOneStudent($event,s, i); ">
                        <td> {{ i }} </td>
                        <td> {{ s.studentfullname }} </td>
                        <td> {{ s.code }} </td>
                        <td> <div><button class="btn btn-info" @click.prevent="choosenOneStudent($event,s, i); " > [+] </button> </div> </td>
                    </tr>
                    
                    </tbody>
                </table>  
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-bs-dismiss="modal" aria-label="close"CLOSE STUDENT MODALe</button>
            </div>
        </div>
    </div>
</div>

Что происходит выше? Во-первых, all_students — это переменная, которую мы уже существуем как объект, и она проходит через два ключа «studentfullname» и «code». Когда мы нажимаем элементы all_students, это сеанс tr или кнопки. Мы вызываем функцию choosenOneStudent, а {{ i }} — это индекс, позволяющий нам легко определить, в каком цикле мы находимся.

Сеанс click.prevent заключается в том, что мы не хотим, чтобы страница обновлялась каждый раз, когда пользователь нажимает информацию о студентах. choosenOneStudent имеет три события($event,s, i). Событие всегда полезное и мощное для генерации необходимых данных из html в javascript. s — удобный способ, если мы хотим удалить отдельные элементы, я также хорош, чтобы узнать индекс, который у нас есть.

Вот переменная all_students, уже объявленная в

data() { 
  return {
    all_students: [
      {studentfullname: 'Timaios Artemios', code: B98},
      {studentfullname: 'Iekika Kimo', code: H33},
      {studentfullname: 'Lloyd Alvina', code: Y3},
      {studentfullname: 'Tobias Lora', code: A671},
      {studentfullname: 'Armani Thomasina', code: K02},
  ],
    what_you_choose: [],
  }
}

Мы делим два набора ключей и значений. ФИО и код студента. Когда мы запустим цикл v-for, мы обнаружим, что цикл сгенерирует пять раз и покажет результат. Если мы помним сеанс {{ i }} в html. Имейте в виду, что цикл i равен 0,1,2,3,4, и он всегда начинается с 0. Теперь я хочу сохранить «what_you_choose» как серент. Пожалуйста, заявите об этом, и мы будем использовать позже.

Мы хотим показать, какой из них мы выбрали и показали на другом сеансе. Мы также используем v-for для его идентификации.

<div v-for="(item, index) in what_you_choose" :key="item">
      <span> {{item.studentfullname}} </span>
      <span> {{item.code}} </span>
</div>

После того, как мы закончили макет HTML, вот функция, чтобы показать, какой список вы выбрали. Теперь не забудьте использовать это. так что vue3 понимает, что вы используете локальную переменную, и помните, что p нам легче идентифицировать и вызывать весь ключ и значение.

async choosenOneProduct(ev, p, i){ 
    this.what_you_choose.push(p)
}

В следующей главе мы хотим узнать, как генерировать из firebase, а не только локально, мы будем использовать what_you_choose2 в другом турориале, чтобы учиться. Спасибо за чтение. Подпишитесь, чтобы узнать больше о vue3/firebase/ и javascript.