I can't use click modifiers when passing up the click event from a child component to the parent component. Does anyone know what I may be doing wrong here? I have a component like this: <!-- ButtonComponent --> <template> <button @click="$emit('click')">Click Me</button> </template> <script setup> </script> And I'm using it like this: <template> <ButtonComponent @click="doSomething()" /> </template> When I try to apply the stop modifier, however: <ButtonComponent @click.stop="doSomething()" /> I get the following err ..read more

I can't use click modifiers when passing up the click event from a child component to the parent component. Does anyone know what I may be doing wrong here? I have a component like this: <!-- ButtonComponent --> <template> <button @click="$emit('click')">Click Me</button> </template> <script setup> </script> And I'm using it like this: <template> <ButtonComponent @click="doSomething()" /> </template> When I try to apply the stop modifier, however: <ButtonComponent @click.stop="doSomething()" /> I get the following err ..read more

In my vue.js app, I am implementing a vue.js component with a v-tooltip to display it's content with multiple entries. One of the entry is a anchor link. The tooltip is working using mouse hover, so as soon as the mouse is hovered outside of the item it tooltip is no longer visible. How do I get around the issue so that a link inside the tooltip can be clicked? Here is my vue.js component Vue.component('label-provider-item', { props: ['item'], template:'tooltip.top="{show: item.pageingNote || !item.pagerId, content:createTooltipHtmlContent(item), trigger:'hover'}"> {{item.label}}' methods ..read more

I'm trying to build something where the components are reusable and always updated across different React projects, even after the build. Would importing components from a CDN be possible? I know it's probably not the best solution, but I'm open to ideas to achieve the objective. For example: import { Button } from 'https:/unpkg.com/:package@:version/:file' <Button /> ..read more

My requirement is to change the left and right navigation arrow color to white then add rounded black background to it. By using below code, navigation size and arrow color got changed to white, but unable to change the arrow background color to rounded black Added in App.vue <template> <swiper-container navigation="true" pagination="true"> <swiper-slide><img src="https://picsum.photos/3000/1000?random=1" /></swiper-slide> <swiper-slide><img src="https://picsum.photos/3000/1000?random=2" /></swiper-slide> <swiper-slide><img src="https ..read more

I can't get a data property to not be null when I'm using axios, I don't know whether it is because the request takes time and the value is set before it is run, I just don't know The property in question is responseBaseCalendarShifts data() { return { dateList: [], year: new Date().getFullYear(), monthNumbers: Array.from(Array(12).keys()), lastDateClicked: null, responseBaseCalendarShifts: [] } }, getDates() { let dateArray = []; let currentDate = new Date(this.year, 0, 1); this.getBaseCalendarShifts ..read more

I have a project using vue / vuetify which I am attempting to merge into an Ionic project (the latter started out as a sample from the Ionic site). The original project is working OK and uses vue version 3.4 . The Ionic project uses Vue version 3.3, which is no good for me. So I try to update vue: PS C:\Users\quilk\source\repos\ionic\wordwheel> npm update vue but this results in the following error: npm ERR! code EBADENGINE npm ERR! engine Unsupported engine npm ERR! engine Not compatible with your version of node/npm: wordwheel@0.0.1 npm ERR! notsup Not compatible with your version of n ..read more

How do I make the q-input buttons appear at the bottom with the autogrow property? Reproduction URL https://codepen.io/timamus/pen/bGJyYzP Code <div id="q-app"> <div > <q-layout view="lHh Lpr lFf"> <q-footer > <q-input outlined bottom-slots v-model="newMessage" label="Send a message" :dense="dense" autogrow > <template v-if="newMessage" v-slot:append> ..read more

Problem I've created a Vue application with Vite. Afterwards, I've installed Electron and Electron Forge. If I create and pack the App, all works fine after installing on my Linux system. But on other systems it doesn't work. The reason is, that the index.html loads the main.js from the absolute path of the /dist/assets/ directory which is not obviously not existing on other systems. How can I config Vite to use the compiled JavaScript from the assets folder, so I can use the packaged (.deb) file on other systems? Folder structure ├── dist/ │ ├── assets/ │ │ ├── index-<bunchofchars> ..read more

I create a vue project use vite. I can debugger file in src folder. But i can't debugger file outside src folder, like vite.config.ts. Below is launch.json. { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Launch Chrome", "request": "launch", "type": "chrome", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}" } ] } I want add a debugger on ..read more