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 :(
Pass value prop as value to v-dialog component, and re-emit input from v-dialog component:
//CustomDialog.vue
<v-dialog :value="value" #input="$emit('input', $event)">
</v-dialog>
...
props:['value']
and add v-model to your parent (custom dialog)
//Parent.vue
<custom-dialog v-model="showProgress">
Example
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>
Related
here is my child component:
export default {
name: "SnackBar",
props: ["show", 'msg', 'progress'],
data: () => ({
show2: this.show,
}),
}
and its template:
<template>
<div class="text-center">
<v-snackbar
v-model="this.show2"
:multi-line="true"
timeout="-1"
>
{{ msg }}
<template v-slot:action="{ attrs }">
<v-progress-circular
v-if="progress"
style="float: right"
indeterminate
color="red"/>
<v-btn
color="red"
text
v-bind="attrs"
#click="show2 = false">
Close
</v-btn>
</template>
</v-snackbar>
</div>
</template>
and I use it in the parent :
<SnackBar :show="snackbar.show" :msg="snackbar.msg" :progress="snackbar.progress"/>
the problem is that the show2 data is not defined:, here is the console log:
Property or method "show2" is not defined on the instance but referenced during render.
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
from official docs:
The prop is used to pass in an initial value; the child component
wants to use it as a local data property afterwards. In this case,
it’s best to define a local data property that uses the prop as its
initial value:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
I am doing exactly the same thing, what is the problem?
Using the arrow function for the data property loses the vue component context, try to use a simple function :
export default {
name: "SnackBar",
props: ["show", 'msg', 'progress'],
data(){
return {show2: this.show,}
},
}
or try out this :
export default {
name: "SnackBar",
props: ["show", 'msg', 'progress'],
data: (vm) => ({
show2: vm.show,
}),
}
I am trying to create a few custom form fields for my page and i learned that i cannot use props to do so so i am trying to find a way to update my parent component variable when i use my child component. Whe i check the parent variable it is always empty.
Here is my component:
<template>
<input
v-model="value"
:placeholder="placeHolder"
class="form-field"
>
</template>
<script>
export default {
props: ['placeHolder'],
data() {
return {
value: ''
}
},
methods: {
updateValue(){
this.$emit("update-text", this.value);
}
},
watch: {
value: function(){
this.updateValue
}
}
}
</script>
And this is how i use the component:
<TextField placeholder="Nome" :update-text="name = value"/>
what exactly am i doing wrong?
I am using vue.js with nuxt.js
I think a simpler approach in this case might be emitting an input event from your custom text field and binding the component to the variable using v-model.
TextField.vue
<template>
<input
#input="$emit('input', $event.target.value)"
:placeholder="placeHolder"
class="form-field"
>
</template>
<script>
export default {
props: ['placeHolder']
}
</script>
Usage
<template>
<TextField placeholder="Nome" v-model="name"/>
</template>
<script>
export default {
data: () => ({
name: '',
}),
}
</script>
Read more about using v-model on custom components here.
I am new in vue js , I am passing data from parent component to child one using props and I can use it in child normally but I can't use it in data of child component
parent
<template>
<div>
<show-question :qdata="question" v-if="question"></show-question>
<h1 v-if="!question"> some error </h1>
</div>
</template>
<script>
import ShowQuestion from './ShowQuestion';
export default {
created(){
axios.get(`/api/question/${this.$route.params.slug}`)
.then(res => {
this.question = res.data.data
})
},
data(){
return {
question : {},
}
},
components:{
ShowQuestion,
},
}
</script>
child
<template>
<v-container>
<v-card>
<div>
<v-card-title class="blue--text"
>{{ data.title }}
<v-spacer></v-spacer>
<v-btn color="teal white--text">5 Replies</v-btn>
</v-card-title>
<v-card-subtitle
> {{data.uid}} {{ data.user }} said {{ data.created_at }}</v-card-subtitle
>
</div>
<v-card-text>{{ data.body }}</v-card-text>
<v-card-actions v-if="own">
<v-btn icon text>
<v-icon color="orange">create</v-icon>
</v-btn>
<v-btn icon text>
<v-icon color="red">delete</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-container>
</template>
<script>
export default {
props: ['qdata'],
data(){
return {
own: User.own(this.qdata.uid),
};
},
};
</script>
this.qdata.uid is always be undefined in console, although it supposed it have values and I can saw it from child template
enter image description here
Your show-questioncomponent is mounted early on because v-if="question" is true. When show-question is mounted, your api call hasn't had a chance to finish, so question is the same as the initial value {}, which is why uid is undefined.
I would change question : {} to question: null, then the child component will only be mounted when there's a question (after the api call).
This is simply because if you check the truthy of an object it will always return true even if the object is empty, which results in the component being rendered before the API call has finished.
Instead, you can check if it's empty or not by converting it to an array and check it's length value, i.e. Object.entries(question).length or simply use the lodash helper method: _isEmpty(question).
Also a quick side note: it's cleaner to use v-else after v-if when you want to render something or the other instead of explicitly negating the value in another v-if, though they're required to be direct siblings.
I can access method from parent vue component using ref and now I would like to access valid data from parent vue component using ref too
Parent.vue:
<v-btn #click="savenewcase()" dark text :disabled="!valid">Save</v-btn></v-toolbar-items>
<NewCaseDialog ref="NewCase"></NewCaseDialog>
<script>
methods: {
savenewcase() {
this.$refs.NewCase.save()
}
}
</script>
NewCaseDialog.vue
<template>
<v-card>
<v-form v-model="valid" ref="NewCaseForm" #keyup.native.enter="save()">
<v-container>
<v-text-field
:counter="64"
v-model="vsubject"
label="Subject / Judul"
prepend-icon="subject"
></v-text-field>
</v-container>
</v-form>
<v-btn #click="save()" :disabled="!valid" color="primary">Save</v-btn>
</v-card>
</template>
<script>
data: () => ({
valid: false,
}),
methods:{
save() {
//run save
}
}
</script>
Edit :
I'm using vuetify
You can try Props instead, it's much easier. From docs:
child-component.vue
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
parent.vue
<blog-post post-title="hello!"></blog-post>
I'm trying to separate my project now into components to make the code readable when adjusting into a responsive app. The problem is passing the v-model from base-select -> child -> parent. How do I store the data selected to the Parent.vue items: ''? Here is my code below.
Parent.vue
<template>
<child></child>
</template>
<script>
import Child from './components/Child'
export default {
components: {
Child,
},
data: ()=> ({
item: ''
})
}
</script>
Child.vue
<template>
// Random HTML
// Random HTML 2
<base-select
:items="select"
>
</template>
<script>
import BaseSelect from '#/components/BaseSelect'
export default {
components: {
BaseSelect,
},
data: ()=> ({
select: ['Select 1', 'Select 2']
})
}
</script>
BaseSelect.vue
<template>
<v-select
v-bind="$attrs"
v-on="$listeners"
class="body-2"
solo
dense
clearable
/>
</template>
To implement v-model you need to add a value property to each child component. Each component will also need to emit an input event so that the parent component can pick up the change (read more here). Note that if you are passing data down through too many components, you should probably look at using Vuex however in this case it would probably still be fine.
Your components would have to look something like this to pass v-model all the way to the base component:
Parent.vue
<template>
<!-- Pass the data item below -->
<child v-model="item"></child>
</template>
<script>
import Child from './components/Child'
export default {
components: {
Child,
},
data: ()=> ({
item: ''
})
}
</script>
Child.vue
<template>
// Random HTML
// Random HTML 2
<base-select
:items="select"
value="value"
#input="e => $emit('input', e)"
>
</template>
<script>
import BaseSelect from '#/components/BaseSelect'
export default {
components: {
BaseSelect,
},
// We add the value prop below to work with v-model
props: {
value: String
},
data: ()=> ({
select: ['Select 1', 'Select 2']
}),
}
</script>
BaseSelect.vue
<template>
<v-select
v-bind="$attrs"
v-on="$listeners"
value="value"
#input="e => $emit('input', e)"
class="body-2"
solo
dense
clearable
/>
</template>
<script>
export default {
props: {
value: String
}
}
</script>
You can find a similar working example that I did here.
You need to use $emit (documentation) to passing data back to parent components. Or you can start using Vuex (state manager for Vue.js).
You also can check the live demo here.