Vue.js предоставляет несколько способов встраивания модальных окон для каждого элемента списка. Один из самых распространенных способов - использование компонентов и директив.
1. Использование компонентов:
Для создания модального окна для каждого элемента списка, вам нужно создать компонент модального окна и затем использовать его внутри компонента списка. Примерно так:
<!-- Модальное окно -->
<template>
<div v-if="showModal">
<!-- Содержимое модального окна -->
</div>
</template>
<script>
export default {
data() {
return {
showModal: false
}
}
}
</script>
<!-- Компонент списка -->
<template>
<div>
<!-- Перебираем каждый элемент списка -->
<div v-for="item in list" :key="item.id">
<!-- Открываем модальное окно при нажатии на элемент списка -->
<button @click="showModal = true">{{ item.name }}</button>
</div>
<!-- Встраиваем модальное окно для каждого элемента списка -->
<modal-component v-for="item in list" :key="item.id" />
</div>
</template>
<script>
import ModalComponent from './ModalComponent.vue';
export default {
components: {
ModalComponent
},
data() {
return {
list: [...]
}
}
}
</script>
2. Использование директив:
Другим вариантом является использование директив, чтобы встраивать модальное окно для каждого элемента списка. В этом случае необходимо создать директиву, которая будет контролировать отображение модального окна для каждого элемента списка. Примерно так:
<!-- Модальное окно -->
<template>
<div v-if="showModal">
<!-- Содержимое модального окна -->
</div>
</template>
<script>
export default {
data() {
return {
showModal: false
}
}
}
</script>
<!-- Компонент списка -->
<template>
<div>
<!-- Перебираем каждый элемент списка -->
<div v-for="item in list" :key="item.id">
<!-- Добавляем директиву к кнопке для открытия модального окна -->
<button v-modal @click="showModal = true">{{ item.name }}</button>
</div>
</div>
</template>
<script>
export default {
directives: {
modal: {
bind: function (el) {
el.addEventListener('click', function () {
// Открытие модального окна
})
}
}
},
data() {
return {
list: [...]
}
}
}
</script>
Выбор между использованием компонентов и директив зависит от конкретных требований и предпочтений разработчика. Компоненты обычно используются, когда модальное окно требуется на более глубоком уровне структуры приложения, например, внутри другого компонента, в то время как директивы могут быть удобны, когда вам нужно привязать функциональность к конкретному элементу интерфейса.