I have a Laravel 10(php 8.1) project in which i have install vue 3 for making a dynamic component. Component Detail: I have created a component for showing team members of a company with a category bar where they can…
Let's say we have following pages: /profile-edit: A private page, where the user can edit his profile let's call him "Sam James". /profile/sam-james: A publicy available profile page (like LinkedIn, Facebook etc., which should have very good SEO and performance…
I have a card component: <template> <div class="z-50 flex w-[15vw] flex-col items-center justify-center gap-5 rounded-md border-2 border-gray-300 bg-[#f3f3f3] p-5 transition-all duration-300 hover:scale-105 hover:font-bold" > <div class="w-[100%]"> <div :class="color" class="flex w-fit items-center justify-center rounded-3xl px-2 text-sm text-white" > {{ collection }}…
I am trying to trigger an event from button to input file. Below is the code <template> <div> <PrimaryButton type="button" :for="props.videoId" :disabled="uploading" @click="selectVideo" > Upload </PrimaryButton> <input :hidden="true" :ref="videoInput" :id="props.videoId" type="file" @change="handleVideoLoad" // for emits :disabled="uploading" /> </div> </template> <script…
First Approach const list = reactive([1, 2, 3, 4, 5]); const handleClick = () =>{ list.push(...[11, 12, 13, 14, 15]); list.push(...[16, 17, 18, 19, 20]); Promise.resolve().then(() => { list.push(33) }); }; Second Approach const list = reactive([1, 2, 3, 4,…
I want to call function A , when someone clicks on the icon of the details and function B when the summary or text section of this detail summary / text is clicked. <details @click="function-A"> <summary @click="function-B"> Some Text </summary>…
I have a bootstrap-vue table that looks like this; Here is the code; <template> <div> <b-table hover :items="items"></b-table> </div> </template> <script> export default { data() { return { items: [ { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { age:…
The app is in laravel, vuejs. Used Laravel breeze for some functionalities. For a feature, a button should open a modal. But modal not opened, The error in the console - [Vue warn]: Property "handleCreateClick" was accessed during render but…
Vue (or maybe Vite) automatically converts my css style from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;" Since I need to support older browsers, where inset is not available, this results in a bug. I need…
Before, I coded nuxt beta + used vuetify's UI. This is my custom text-field component <script setup lang="ts"> </script> <template> <v-text-field class="text-field" v-bind="$attrs" variant="solo"> <template v-for="(_, name) in $slots" #[name]="slotData"> <slot :name="name" v-bind="slotData" /> </template> </v-text-field> </template> But after I…