<template> <VueDatePicker v-model="date" ref="datepicker" /> </template> <script setup> import { ref } from 'vue'; const date = ref(); const datepicker = ref(null); const yourCustomMethod = () => { if (datepicker) { // Close the menu programmatically datepicker.value.closeMenu() } } </script>…
I've created several components that communicate with each other using custom events. The issue is that I'm having difficulties with event propagation. I have an App.vue component that instantiates a GeneriqueButton component, which in turn instantiates a BaseButton component. I've…
I need help with styling component el-date-picker from element plus, can't figure it out. Code for a text input from component: <label v-if="label" class="form-label" :for="id">{{ label }}:</label> <input :id="id" ref="input" v-bind="{ ...$attrs, class: null }" class="form-input" :class="{ error: error }"…
I have a table "css_rules" with 2 columns: "id_type" and "icone_type". I'd like to generate CSS rules like this: .custom-marker .[id_type] { background-image: url(http://example.com/[icone_type].svg); } What I tried is that: async setup(props, { emit }) { const apiUrl = import.meta.env.VITE_APP_API_URL;…
name of it on load, that div just staying under my app div. i dont know what is it and seeing this first time on my vue project. checked extensions and tried to google it to figure it out but…
I am attempting to access the route "localhost:8000/contact/edit/{contact} in my vue file I am attempting it with <Link :href="route('contact.edit', {contact:contact.id})">Edit Contact</Link> Route in web.php Route::prefix('contact')->group(function() { Route::post('/', [ContactController::class, 'store'])->name('contact.store'); Route::get('/create/{customer}', [ContactController::class, 'create'])->name('contact.create'); Route::get('/edit/{contact}', [ContactController::class, 'edit'])->name('contact.edit'); }); Controller: public function edit(Contact…
My problem: My clock icons break off like this on some phone screens How it should be: They should take the time value with them and break together like this: Here's the HTML: https://jsfiddle.net/jfta78n3/ And just in case it could…
I need to pass class name from script to style <script lang="ts" setup > const className = ref('some-class') </script> <style lang="sass" module > .#{v-bind(className)}--dynamic pointer-events: none </style> In this case I get an error: Error: expected selector. .v-bind(className)--dynamic ━ error…
In this example I have an object that got a name as a string parameter and a function that just logs this const me = reactive({ name: "foo", sayHi: function () { console.log("Hi I am : ", this); }, });…
I am using NuxtJS 3 and Vue 3 and I am connecting to a single mongoDb database without problem. I would like to connect at the same time to another database, where I will store and retrieve data. My question…