Questions tagged [vue-script-setup]
is a compile-time syntactic sugar for using Composition API inside Single-File Components (SFCs). It is the recommended syntax if you are using both SFCs and Composition API.
vue-script-setup
176
questions
1
vote
1
answer
24
views
VueJS: Can a child component observe if a parent component has defined its event handler
given a child component Foo.vue
<template>
...
<button @click="emit('bah', ...)">...</button>
...
</template>
<script setup>
const emit = defineEmits(['...
- 991
2
votes
2
answers
51
views
How to pass data to child component using vue 3 h render after data is changed?
I have an issue that needs to be resolved.
a.ts
const open = ref<boolean>(false)
h(RowAction, {
open: open,
onDelete: () => {
Data.remove().then(() => {}).catch(() => {})....
- 21
0
votes
0
answers
187
views
Type of Vue reference in a component with a generic type
I am using Vue 3 (Composition API) with Typescript. Here is my code.
<script setup lang="ts" generic="T">
import { ref, Ref } from "vue";
const props = defineProps&...
- 121
2
votes
0
answers
43
views
Reset Pinia store nuxt3 with vite HMR
I am having issues with my store not resetting properly when locally developing, this is (i suppose) because of Vite HMR in my Nuxt3 application.
My store is defined as so:
import { defineStore, ...
- 3,520
1
vote
0
answers
38
views
How to stop executing rest of code in script setup syntax in composition api Vue 3
I have a page template that contains the following sub-component:
<template>
<ManageVacanciesAndMatchesTabVacancies @loading-data="setIsTabDataLoading" />
</template>
And ...
- 3,520
2
votes
1
answer
835
views
why do I get this error when I try to use multiple defineModels in vue.js?
I am trying to use the v-model directive on two input elements. However, I am getting the following error: duplicate model name "modelValue". Below I show the code that generates this error:
...
0
votes
1
answer
45
views
$route throws an undefined error from inside script setup
I was wondering why this works:
<template>
<h1> You are on page {{ $route.params.page }}</h1>
</template>
but when I try to access the param from script setup as in
<...
- 15
0
votes
1
answer
49
views
Vue.js 3 SFC multiple lists
I am creating a vue.js3 SFC application where the list component is used multiple times. The aim is to produse a separate lists of items in each component from SingleList.vue. I wanted to use a v-for='...
- 15
0
votes
1
answer
157
views
Vue.js 3 SFC passing data to siblings
I am trying to pass a prop between sibling elements (a card and an input) and so far it has not been successful.
I have a button nested within a card element. When someone is pressing a button, I emit ...
- 15
1
vote
1
answer
175
views
vue3 script setup not working with revogrid
I have a vue3 app, in which I'd like to keep using the standard composition api style. Unfortunately, RevoGrid doesn't seem to like it. RevoGrid works with an options api style , but the equivalent ...
1
vote
1
answer
42
views
Component isn't updating from computed value [duplicate]
I have a generic component linked to a computed value to simulate routing.
There is a current page property, and three links, whenever the user clicks on a link, that property gets updated via the ...
- 15
2
votes
1
answer
4k
views
How to use defineModel (in Vue 3.4) for uses other than inputs
The examples given for defineModel in the Vue docs all relate to uses for data inputs. I was wondering if this construct could also be used elsewhere, thus avoiding the somewhat cumbersome props/emit ...
- 1,297
0
votes
1
answer
2k
views
Vue watchers and reactivity
In my vue app, I want to watch route changes, and then react to the change. Here is an example where I simulate a route change.
<script setup>
import { ref, watch } from 'vue'
import { ...
- 25
1
vote
1
answer
39
views
How can I get the argument type of an SFC component's event?
Say I have an SFC component with a save emit:
// ChildComponent.vue
const emit = defineEmits<{
save: [data: { new: Row[]; removed: Row[] }];
}>();
If I want to use the new & removed in a ...
- 388
0
votes
1
answer
26
views
VueJS passing parameter to bound property
I want to track the state of several buttons without having a tracker variable and function for each.
So I want to pass a parameter through to a computed property, something like this:
<div class=&...
- 2,143