Select2 is destroyed in Form Single Vue File

I have form layout in one Vue file. I use v-if directive to show html based on step.
Initially when the DOM loads select2 is loaded and is working but when on the page i hit Next button to show other html in the same file, and thne goes back to Previous step to show the HTML, Select2 is destroyed.

Here is my code
Layout file

<script setup>
import { ref, onMounted } from "vue";
import ApplicationLogo from "@/Components/ApplicationLogo.vue";
import { Link } from "@inertiajs/vue3";

import "../../../public/assets/js/custom/documentation/select2.js"

onMounted(() => {
 // Layout partials initialization
 KTComponents.init();
 // initializeSelect2();
})


</script>

<template>
 <div class="d-flex flex-column flex-root" id="kt_app_root">
 <div class="d-flex flex-column flex-lg-row flex-column-fluid">
 <!--begin::Aside-->
 <div class="d-flex flex-lg-row-fluid">
 <!--begin::Content-->
 <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
 <!--begin::Image-->
 <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
 src="assets/media/auth/agency.png" alt="" />
 <img class="theme-dark-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
 src="assets/media/auth/agency-dark.png" alt="" />
 <!--end::Image-->
 <!--begin::Title-->
 <h1 class="text-gray-800 fs-2qx fw-bold text-center mb-7">Fast, Efficient and Productive</h1>
 <!--end::Title-->
 <!--begin::Text-->
 <div class="text-gray-600 fs-base text-center fw-semibold">In this kind of post,
 <a href="#%22%20class=%22opacity-75-hover%20text-primary%20me-1" target="_blank" rel="noopener noreferrer">the blogger</a>introduces a person
 they&rsquo;ve interviewed
 <br />and provides some background information about
 <a href="#%22%20class=%22opacity-75-hover%20text-primary%20me-1" target="_blank" rel="noopener noreferrer">the interviewee</a>and their
 <br />work following this is a transcript of the interview.
 </div>
 <!--end::Text-->
 </div>
 <!--end::Content-->
 </div>
 <!--begin::Aside-->
 <!--begin::Body-->
 <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
 <!--begin::Wrapper-->
 <div class="bg-body d-flex flex-column flex-center rounded-4 w-md-600px p-10">
 <!--begin::Content-->
 <div class="d-flex flex-center flex-column align-items-stretch h-lg-100 w-md-500px">
 <!--begin::Wrapper-->
 <div class="d-flex flex-center flex-column flex-column-fluid pb-15 pb-lg-20">
 <slot />
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</template>

Vue Component File

<script setup>
import GuestLayout from "@/Layouts/GuestLayout.vue";
import InputError from "@/Components/InputError.vue";
import InputLabel from "@/Components/InputLabel.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import TextInput from "@/Components/TextInput.vue";
import Select from "@/Components/Select.vue";
import { Head, Link, useForm } from "@inertiajs/vue3";
import { ref, onMounted } from "vue"


const form = useForm({
 first_name: "",
 last_name: "",
 email: "",
 password: "",
 password_confirmation: "",
 category_id: "",
 industry_id: "",
 location_name: "",
 company_name: "",
});
const selectedOption = ref("");
const categories = [
 { value: "0", label: "Company" },
 { value: "1", label: "Individual" },
];
const props = defineProps({
 industries: {
 type: Array
 },
 countries: {
 type: Array
 },
 errors: {
 type: Object,
 required: false, // Adjust based on your needs
 },

});

const submit = () => {
 form.post(route("register"), {
 onFinish: () => form.reset("password", "password_confirmation"),
 });
};

const formStep = ref(1);

const nextStep = () => {
 formStep.value++;
};

const prevStep = () => {
 formStep.value--;
};

</script>

<template>
 <GuestLayout>

 <Head title="Register" />

 <form @submit.prevent="submit" class="form-inline w-100">
 <div class="text-center mb-11">
 <!--begin::Title-->
 <h1 v-if="formStep == 1" class="text-gray-900 fw-bolder mb-3">
 Account
 </h1>
 <h1 v-if="formStep == 2" class="text-gray-900 fw-bolder mb-3">
 Registration
 </h1>
 <h1 v-if="formStep == 3" class="text-gray-900 fw-bolder mb-3">
 Location
 </h1>
 <!--end::Title-->
 </div>
 <div v-if="errors">
 <p v-for="error in errors" :key="error.field" class="text-danger">{{ error }}</p>
 </div>
 <div v-if="formStep == 1">
 <div class="row">
 <div class="col-6 mb-3">
 <InputLabel for="category" value="Category" />
 <Select :options="categories" id="category_id" class="form-select mt-1" v-model="form.category_id"></Select>
 <InputError class="mt-2" :message="form.errors.category_id" />
 </div>

 <div class="col-6 mb-3">
 <InputLabel for="industry" value="Industry" />
 <Select :options="industries" class="form-select mt-1" v-model="form.industry_id"></Select>
 <InputError class="mt-2" :message="form.errors.industry_id" />
 </div>
 </div>



 </div>

 <!-- Step 2 - Organization Information Fields: Starts-->
 <div v-if="formStep == 2">
 <div class="row">
 <div class="mb-3">
 <InputLabel for="company_name" value="Company Name" />
 <TextInput id="company_name" type="text" class="form-control mt-1" v-model="form.company_name"
 required autofocus autocomplete="company_name" />
 <InputError class="mt-2 text-danger" :message="form.errors.company_name" />
 </div>
 </div>
 </div>

 <!-- Step 2 - Organization Information Fields: End-->
 <!--begin::Submit button-->
 <div class="d-flex justify-content-between align-center mb-10">
 <!--begin::Sign up-->
 <div class="text-gray-500 text-center fw-semibold fs-6" v-if="formStep == 1">
 <Link :href="route("login")" class="btn btn-dark fw-semibold">
 Already registered?
 </Link>
 </div>
 <!--end::Sign up-->
 <PrimaryButton type="button" id="kt_sign_up_submit" class="btn btn-primary" v-if="formStep == 1"
 @click="nextStep" :class="{ "opacity-50": form.processing }" :disabled="form.processing">
 <!--begin::Indicator label-->
 <span class="indicator-label">Next</span>
 <!--end::Indicator label-->
 <!--begin::Indicator progress-->
 <span class="indicator-progress">Please wait...
 <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
 <!--end::Indicator progress-->
 </PrimaryButton>

 <PrimaryButton type="button" id="kt_sign_up_submit" class="btn btn-dark" v-if="formStep == 2"
 @click="prevStep" :class="{ "opacity-50": form.processing }" :disabled="form.processing">
 <!--begin::Indicator label-->
 <span class="indicator-label">Previous</span>
 <!--end::Indicator label-->
 <!--begin::Indicator progress-->
 <span class="indicator-progress">Please wait...
 <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
 <!--end::Indicator progress-->
 </PrimaryButton>

 <PrimaryButton type="submit" id="kt_sign_up_submit" class="btn btn-primary" v-if="formStep == 2"
 :class="{ "opacity-50": form.processing }" :disabled="form.processing">
 <!--begin::Indicator label-->
 <span class="indicator-label">Next</span>
 <!--end::Indicator label-->
 <!--begin::Indicator progress-->
 <span class="indicator-progress">Please wait...
 <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
 <!--end::Indicator progress-->
 </PrimaryButton>
 </div>
 <!--end::Submit button-->

 </form>
 </GuestLayout>
</template>

Guest 7 months ago

Webpack Bootstrap Metronic

2 Answers

Replies (2)

Vitto Chimo 6 months ago

Ù…Ø±ØØ¨Ø§Ù‹ØŒ Ù„Ù‚Ø¯ Ø£Ø¨Ù‡Ø±Ù†ÙŠ Ù…ÙˆÙ‚Ø¹ www.mostbet-egp.bet Ø¨Ø¹Ø±ÙˆØ¶Ù‡ Ø§Ù„Ø±Ø§Ø¦Ø¹Ø© Ù„Ù„Ù…Ø±Ø§Ù‡Ù†Ø© ÙˆØ§Ù„Ù…Ù‚Ø§Ù…Ø±Ø©. Ø£Ù†Ø§ Ø£ØØ¨ Ø§Ù„Ø±ÙŠØ§Ø¶Ø©ØŒ Ù„Ø°Ø§ ÙØ¥Ù† Ø§Ù„Ù‚Ø¯Ø±Ø© Ø¹Ù„Ù‰ Ø§Ù„Ù…Ø±Ø§Ù‡Ù†Ø© Ø¹Ù„Ù‰ Ø±ÙŠØ§Ø¶Ø§Øª Ù…Ø®ØªÙ„ÙØ© ÙˆØ¨Ø£Ø´ÙƒØ§Ù„ Ù…Ø®ØªÙ„ÙØ© Ø£Ù…Ø± ÙŠØ³Ø¹Ø¯Ù†ÙŠ Ù„Ù„ØºØ§ÙŠØ©. ÙŠØ³Ø¹Ø¯Ù†ÙŠ Ø¨Ø´ÙƒÙ„ Ø®Ø§Øµ Ø£Ù† Ø§Ù„Ù…ÙˆÙ‚Ø¹ Ù„ÙŠØ³ ÙÙ‚Ø· Ø§Ù„Ø±Ù‡Ø§Ù†Ø§Øª Ø§Ù„ØªÙ‚Ù„ÙŠØ¯ÙŠØ© ÙˆÙ„ÙƒÙ† Ø£ÙŠØ¶Ù‹Ø§ ÙØ±ØµØ© Ø§Ù„Ù…Ø´Ø§Ø±ÙƒØ© ÙÙŠ Ø§Ù„Ø±Ù‡Ø§Ù†Ø§Øª Ø§Ù„ØÙŠØ©ØŒ Ù…Ù…Ø§ ÙŠØ¶ÙŠÙ Ø§Ù„Ù…Ø²ÙŠØ¯ Ù…Ù† Ø§Ù„Ø£Ø¯Ø±ÙŠÙ†Ø§Ù„ÙŠÙ† Ø¥Ù„Ù‰ Ø§Ù„Ù„Ø¹Ø¨Ø©. Ø¨Ø§Ù„Ø¥Ø¶Ø§ÙØ© Ø¥Ù„Ù‰ Ø°Ù„ÙƒØŒ ÙÙ‚Ø¯ Ø³Ø§Ø¹Ø¯ØªÙ†ÙŠ Ø§Ù„Ù…ÙƒØ§ÙØ¢Øª ÙˆØ§Ù„Ø¹Ø±ÙˆØ¶ Ø§Ù„ØªØ±ÙˆÙŠØ¬ÙŠØ© Ø§Ù„ØªÙŠ ØªÙ‚Ø¯Ù…Ù‡Ø§ Ø§Ù„Ù…Ù†ØµØ© Ø¹Ù„Ù‰ ØªØØ³ÙŠÙ† ØªØ¬Ø±Ø¨Ø© Ø§Ù„Ù„Ø¹Ø¨ Ø¨Ø´ÙƒÙ„ ÙƒØ¨ÙŠØ±. Ø£ÙˆØµÙŠ Ø¨Ù€ MostBet Ù„Ø£ÙŠ Ø´Ø®Øµ ÙŠØ±ÙŠØ¯ Ø§Ù„Ø§Ø³ØªÙ…ØªØ§Ø¹ Ø¨Ø§Ù„Ù…Ø±Ø§Ù‡Ù†Ø© Ø¹Ù„Ù‰ Ù…Ø³ØªÙˆÙ‰ Ø¹Ø§Ù„Ù!

Lauris Stepanovs Author7 months ago

Hi,

Thank you for reaching out to us.

Did you import the select2 styles?

import "assets/plugins/global/plugins.bundle.css"

You can find usage examples in our select2 documentation.
https://preview.keenthemes.com/html/metronic/docs/forms/select2

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Select2 is destroyed in Form Single Vue File

Replies (2)

Metronic

Products

Legal

Stay Connected