VueJS 从孩子更改 v-model 变量 [英] VueJS change v-model variable from child
问题描述
我正在尝试通过父组件更改组件的 v-model 大部分我没有得到.
在父组件中我有一个 showProgress 变量，当我将其更改为 true 子组件 v-model 时我想要它> 切换到 true.
ProgressModal.vue
<v-dialog v-model="show"persistent max-width="400"><v-card :dark="($theme === 'dark')"><v-card-title class="headline" v-text="title"></v-card-title><v-divider></v-divider><div class="text-xs-center mt-2"><v-progress-circular indeterminate :size="100" :color="$color"></v-progress-circular><v-card-text v-text="text"></v-card-text></v-card></v-对话框></模板><脚本>导出默认{name: '进度模式',道具:['标题'，'文本']，数据:() =>({显示:真实}),方法: {}}
我已经尝试过使用
代替 v-dialog 中的 v-model 但它不起作用:(
为了让父级能够使用 v-model，你必须在孩子并使用它.
<v-dialog v-model="value"persistent max-width="400">...</模板><脚本>导出默认{name: '进度模式',props: ['title', 'text', 'value'],//添加了 'value'数据:() =>({...这样，当你使用:
...progress-modal 中的 value 将具有父 showProgress 的值.
保持命名为show
要使用其他内部名称而不是 value，您可以 在组件中声明model选项.
<v-dialog v-model="show"persistent max-width="400">...</模板><脚本>导出默认{name: '进度模式',props: ['title', 'text', 'show'],//添加了 'show'模型:{//添加模型选项道具:'显示'//},//数据:() =>({}),//在这种情况下，从数据中删除 show...I'm trying to change the v-model of a component by the parent component most I'm not getting.
In the parent component I have a showProgress variable, I want it when I change it to true the child v-model <progress-modal> switch to true.
ProgressModal.vue
<template>
<v-dialog v-model="show" persistent max-width="400">
<v-card :dark="($theme === 'dark')">
<v-card-title class="headline" v-text="title"></v-card-title>
<v-divider></v-divider>
<div class="text-xs-center mt-2">
<v-progress-circular indeterminate :size="100" :color="$color"></v-progress-circular>
<v-card-text v-text="text"></v-card-text>
</div>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text'],
data: () => ({
show: true
}),
methods: {
}
}
</script>
I already tried to use
<progress-modal v-model="showProgress">
Instead of v-model in v-dialog but it does not work :(
To enable usage of v-model by the parent, you have to define a value prop in the child and use it.
<template>
<v-dialog v-model="value" persistent max-width="400">
...
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text', 'value'], // added 'value'
data: () => ({
...
</script>
This way, when you use:
<progress-modal v-model="showProgress">
...the value inside progress-modal will have the value of parent's showProgress.
Keeping it named show
To use other internal name instead of value you can declare the model option in the component.
<template>
<v-dialog v-model="show" persistent max-width="400">
...
</template>
<script>
export default {
name: 'progress-modal',
props: ['title', 'text', 'show'], // added 'show'
model: { // added model option
prop: 'show' //
}, //
data: () => ({
}), // in this case, remove show from data
...
</script>
这篇关于VueJS 从孩子更改 v-model 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
