Когда мы создаем 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.