I'm trying to use a props from the parent component to use it as a data in my child component.
parent component :
<ChangeCommentModal :comment="this.modalInfo.comment" />
And child component (ChangeCommentModal) :
props: ['comment'],
data() {
return {
localComment: this.comment,
};
}
The localComment variable get the value but I can't use it in a v-model in this child component :
<textarea id="message" rows="2" v-model="localComment"></textarea>
The textarea is empty when the component is displayed.
Any idea ? Thanks !
Seems your code is only assign this.comment to localComment once when the child component is init. Instead, you can use watcher to watch the change of prop comment and assign it to the localComment everytime you update from the parent component. Let's try to see if resolve your problem
watch() {
comment(value) {
this.localComment = value
}
}
Related
I have included an $emit in an axios post of a child component as follows.
axios.post('/api/register', qdata)
.then((response) => {
this.$emit('userUpdated', response.data)
})
In the parent component, I have a div element in the html code containing a v-on, which refers to the userUpdated of the $emit.
<div id="username" v-on:userUpdated="nameUpddated($event)">
<p>{{userid}}</p>
</div>
Finally, the script section of the parent contains the following function called by the v-on.
nameUpddated: function (updatedUser) {
this.userid = updatedUser
}
I have validated that the axios returns a proper value in the Child component. However, the function in the parent never gets called.
In your parent component use child component name instead of div.
Edit: I also added v-if to conditionally show the component.
<child-component v-if="isVisible" id="username" v-on:userUpdated="nameUpddated($event)">
<p>{{userid}}</p>
</child-component>
Also, you need to add a data property to show the component conditionally (initially hidden).
data () {
return {
isVisible: false
}
}
Now, it is up to you at what point you want to show the child component. You would simply change isVisible to true.
After making this change, it should work as expected.
Note: please remember to register the child component properly as well in your parent component:
import childComponent from '#/components/childComponent'
export default {
components: {
childComponent
}
}
I have a child component called Card.vue where I make a card based on the length of an object in the parent component. In the child component I would like to use the data inside the object send from the parent. I get the error message that 'legend' is not defined. How do I do solve this?
Parent component:
<alst-card v-for="(legend, index) in profile.legends.all" :key="index" v-bind="legend"></alst-card>
Child component:
<p class="card-text" style="min-width: 100px">{{ legend.data.kills.value }}</p>
export default {
props: {
legend: Object
}
}
Try v-bind:legend="legend" instead of v-bind="legend"
The legend on the left is the props that the child component declared, the legend on the right is the data/property from the parent.
For example if your children declared:
export default {
props: {
givemelegend: Object
}
}
Then in Parent.Vue, you would want: v-bind:givemelegend="legend"
I have 3 vue.js nested components: main, parent, child.
The parent component load basic data, the child is a simple countdown widget which needs just a data to be configured.
If I set the parent script with static data (IE deadline='2019-12-12') the child show the widget working nice, but if I use dynamic data it generate error.
I'm using computed to pass data to the child component and if I debug it using an alert I see 2 alerts: undefined and then the correct date.
The issue is the first computed data (undefined) crash the widget, so how to create child component using updated (loaded) data?
Parent template:
<template>
<div>
<flip-countdown :deadline=deadline></flip-countdown>
</div>
</template>
Parent Script: it needs to be fixed
export default {
components: {FlipCountdown},
props: ['event'],
computed: {
deadline: function () {
if (typeof(this.event.date)!="undefined") {
//alert(this.event.date)
return this.event.date;
} else {
return "2019-05-21 00:00:00";
}
},
},
Child template: it works
<template>
<div>
<flip-countdown :deadline="deadline"></flip-countdown>
</div>
</template>
Your parent component passes the deadline to its child component before the mounted lifecycle hook fires. Your child component sets its deadline with the initial value of undefined.
You should make deadline a computed property in child component:
computed: {
internalDeadline() {
return this.deadline; // comming from props
}
}
Then you can use internalDeadline in child.
Alternatively, you could wait to render the child component until deadline is defined:
<flip-countdown v-if="deadline !== undefined" :deadline="deadline"></flip-countdown>
I have a big problem with VueJS and Element UI https://element.eleme.io/#/en-US/component/input#autocomplete-attributes
I use the AutoComplete Component, and i want that I click on the input (onFocus Event), my suggestions re appear
<el-autocomplete
id="inputID"
name="inputName"
class="inputClass"
v-model="inputModel"
:fetch-suggestions="querySearchInput"
placeholder= "Select an Input"
ref="inputReference"
value-key="id"
v-loading="inputLoader"
:value="inputValue"
#select="onChangeInput"
#focus="onFocusInput"
#clear="onClearInput"
clearable
>
<!-- Slot : Override Component Suggestions -->
<template slot-scope="{item}" v-if="item.id">
{{ item.id }} - {{ item.name }}
</template>
</el-autocomplete>
on my onFocus or onClear i used :
this.inputModel = "";
this.inputValue = ""
But it does not reset my suggestions.. :/
The only way for me is to use :
this.$refs.inputReference.value = "";
But it's not a best pratice I have a message : " vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" "
I use a :value and a v-model on my component because i stock an ID but i display a label with i18n, isn't important
VERY THANKS YOU
I think it's because the AutoComplete Component includes a InputComponent, and i'm not a pro with the cascading prop on VueJS..
Thanks.
Just do like it says. Do not mutate props. If you need to change some date from props, save it to local component data and modify it
props: {
foo: {
type: number,
requred: true
}
},
...
data () {
return {
localFoo: this.foo
}
}
I want to pass down the changes made in parent component data values to its child components each time the value changes in parent how can i achieve it in vue.js. I am using 3 custom components that have to reflect the current value of the parent component each time. p.s i am new to vue.js
you just need to pass it as a prop. In your template:
<my-component :my-prop="myData" />
and in your script tag:
export default {
data() {
myData: 0,
}
}
Whenever you update this.data, the component will update its view, as the prop will have changed
Data is typically passed one-way from parent to child components via props. See the documentation on this here.
Example:
// register the child component
Vue.component('child', {
props: ['myProp'],
template: '<span>{{ myProp }}</span>'
})
// in parent component
<child :my-prop="hello"></child>