I have a simple registration endpoint that I want to allow for a user to register in my vue app, I also want to display appropriate errors from my backend to the vue client. The error JSON structure looks like…
I started getting these errors after updating node_modules (and Vue to v3.3) just today. Vue 3.3, WebPack (not Vite), and VS Code Volar is in use. The project is huge. Every *.vue file with <script setup lang="ts"> has import {…
In my component, i have written one function for conditional check to disable/enable a button. There are multiple nested conditional check. While running, i am getting 'Reduce coginitive complexity' error in sonar and it is critical. Here is my function…
In my parent component I have something similar to this, <template> <ProductCounter v-model="formData.productCount" label="product count" /> </template> <script setup> const initialFormData = { productCount: null, firstname: '', surname: '', phone: '', email: '', postcode: '', submittedOnce: false, errors: [] }…
I'm using Vuetify text-fields and want to display a tooltip containing the content if the content is greater than the field width (user needs to scroll). The tooltip should only appear on hover (default behaviour). I started with the following…
I am a newbie in Vue.js. Not sure how to return a function result to data value. I have an array of objects. Each has data and a query expression. I have two functions: First one changes request expression (string)…
How can I prevent the watch function from being triggered for a key other than the one selected in the data array? import { useSessionStorage } from "@vueuse/core"; const defaultState = { data: [ { key: 1, name: "A" },…
Hydration children mismatch in : server rendered element contains fewer child nodes than client vdom.. Hydration children mismatch in : server rendered element contains fewer child nodes than client vdom.. Nuxt Link Not Working When Use It Within Slick Its…
The script <script> import { ref, reactive } from 'vue'; export default { data() { const todo = ref(''); const list = reactive([]); return { todo, list }; }, components: { navbar, }, methods: { render() { console.log(this.list.length); return this.list…
how can I implement this div classes that change on-click? I tried to add border line but it doesn't work to me. border-width: 0 0 10px 0; This code doesn't change size of div. Should it be new div or…