I need help, I have users who need to edit in a modal window by clicking on the desired one, in the end everything works in the layout, the tabs switch normally, and when I paste the same code into the vue component, the tabs stop working ..
[enter image description here][2]
USER-LIST COMPONENT:
<template>
<Head title="Dashboard"/>
<BreezeAuthenticatedLayout>
<div class="table-home">
<div class="table-home__header">
<div class="table-home__header-title">Пользователи</div>
<div class="table-home__options">
<div class="table-home__options-item">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.12857 4.26839L3.31563 2.12548C3.48647 1.95815 3.7636 1.9582 3.93434 2.12548L6.12132 4.26839C6.39667 4.53812 6.20059 5.00001 5.81195 5.00001H4.5V13.5714C4.5 13.8081 4.30414 14 4.0625 14H3.1875C2.94586 14 2.75 13.8081 2.75 13.5714V5.00001H1.43794C1.04853 5.00001 0.853791 4.53758 1.12857 4.26839ZM7.5625 3.7143H14.5625C14.8041 3.7143 15 3.52243 15 3.28573V2.42858C15 2.19188 14.8041 2.00001 14.5625 2.00001H7.5625C7.32086 2.00001 7.125 2.19188 7.125 2.42858V3.28573C7.125 3.52243 7.32086 3.7143 7.5625 3.7143ZM7.125 6.71429V5.85715C7.125 5.62045 7.32086 5.42858 7.5625 5.42858H12.8125C13.0541 5.42858 13.25 5.62045 13.25 5.85715V6.71429C13.25 6.951 13.0541 7.14287 12.8125 7.14287H7.5625C7.32086 7.14287 7.125 6.951 7.125 6.71429ZM7.125 13.5714V12.7143C7.125 12.4776 7.32086 12.2857 7.5625 12.2857H9.3125C9.55414 12.2857 9.75 12.4776 9.75 12.7143V13.5714C9.75 13.8081 9.55414 14 9.3125 14H7.5625C7.32086 14 7.125 13.8081 7.125 13.5714ZM7.125 10.1429V9.28572C7.125 9.04901 7.32086 8.85715 7.5625 8.85715H11.0625C11.3041 8.85715 11.5 9.04901 11.5 9.28572V10.1429C11.5 10.3796 11.3041 10.5714 11.0625 10.5714H7.5625C7.32086 10.5714 7.125 10.3796 7.125 10.1429Z" fill="#2F3747"></path>
</svg>
Сортировка
</div>
<div class="table-home__options-item">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.4369 2H2.56315C2.06351 2 1.8114 2.60623 2.16542 2.96026L6.5 7.29549V12.125C6.5 12.3085 6.58955 12.4805 6.73993 12.5858L8.61493 13.8979C8.98484 14.1568 9.5 13.8944 9.5 13.437V7.29549L13.8347 2.96026C14.188 2.60694 13.9376 2 13.4369 2Z" fill="#2F3747"></path>
</svg>
Фильтр
</div>
</div>
</div>
<div class="table-home__body">
<div v-for="user in users" :key="user.id" class="table-home__line" style="display: flex;justify-content: space-between;">
<button @click="showModal(user.id)" class="button-show-bid" style="width: 15%">Управление</button>
<ModalEdit :ref="'modal_' + user.id" />
</div>
</div>
<div class="table-home__footer">
<div class="pagination">
<div class="pagination__count">
<div class="pagination__count-title">Выводить по:</div>
<div class="pagination__select">
<select name="1" id="1">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.60557 3H10.3944C10.9333 3 11.2027 3.63741 10.8213 4.01097L6.92834 7.82656C6.69222 8.05781 6.30778 8.05781 6.07166 7.82656L2.17875 4.01097C1.79733 3.63741 2.06674 3 2.60557 3Z" fill="#6E7681"></path>
</svg>
</div>
</div>
<div class="pagination__list">
<div class="pagination__text">1-6 из 1240</div>
<div class="pagination__buttons">
<div class="pagination__button pagination__button-left">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.08571C0 1.38152 1.38152 0 3.08571 0L23.9143 0C25.6185 0 27 1.38152 27 3.08571L27 23.9143C27 25.6185 25.6185 27 23.9143 27L3.08571 27C1.38152 27 0 25.6185 0 23.9143L0 3.08571Z" fill="#ECEFF3"></path>
<path d="M16.4777 21L18 19.355L13.0553 14L18 8.645L16.4777 7L10 14L16.4777 21Z" fill="#2F3747"></path>
</svg>
</div>
<div class="pagination__button pagination__button-right">
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 3.08571C0 1.38152 1.38152 0 3.08571 0L23.9143 0C25.6185 0 27 1.38152 27 3.08571L27 23.9143C27 25.6185 25.6185 27 23.9143 27L3.08571 27C1.38152 27 0 25.6185 0 23.9143L0 3.08571Z" fill="#ECEFF3"></path>
<path d="M11.5223 7L10 8.645L14.9447 14L10 19.355L11.5223 21L18 14L11.5223 7Z" fill="#2F3747"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>
<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';
import Requests from "@/Components/Modules/Requests/List";
import ModalEdit from "@/Pages/Users/ModalEdit";
export default {
data() {
return {
users: []
}
},
components: {
ModalEdit,
Requests,
BreezeAuthenticatedLayout,
Head
},
async mounted() {
await axios.get('/api/users').then(res => {
this.users = res.data.data
});
},
methods: {
showModal(id) {
let modal_id = "modal_" + id;
this.$refs[modal_id][0].show(id);
}
}
}
</script>
<style scoped>
</style>MODAL COMPONENT:
<script>
export default {
data() {
return {
visible: false
}
},
methods: {
show(index) {
this.visible = true
},
close() {
this.visible = false
}
}
}
</script><template>
<div v-if="visible">
<div class="overlay"></div>
<div class="modal-user">
<div class="modal-user__container">
<div class="tabs">
<ul class="tabs__button-group">
<li>
<button class="tabs__toggle active" data-tab="1">Профиль пользователя</button>
</li>
<li>
<button class="tabs__toggle" data-tab="2">Распределение ролей</button>
</li>
</ul>
<ul class="tabs__container">
<li class="tabs__tab-panel active" data-tab="1">......</li>
<li class="tabs__tab-panel active" data-tab="2">......</li>
</ul>
</div>
</div>
</div>
</div>
</template>But in the end, switching does not work