I have a parent component in which I want to display a title which is an attribute contained on a an object displayed on a child component. I would be something like this:
<parent-component>
<h1>{{title_i_want_to_display}}</h1>
<child-component><p>{{object.title}}</p></child-component>
<parent-component>
How can I capture that object.title and display it inside my h1 tag on the parent?
child.component.ts
#Output titleEvent = new EventEmiter<string>();
ngOnInit(){
this.titleEvent.emit(object.title);
}
parent.component.ts
public myTitle: string;
onTitleFetch(title){
this.myTitle = title;
}
parent.component.html
<h1>{{myTitle}}</h1>
<child-component (titleEvent)="onTitleFetch($event)"></child-component>
Related
I have a parent component creating child components using v-for directive:
<div class="planlist">
<ul id="planOl">
<PlanLego
v-for="action in store.plan"
:v-if="action !== activeStep"
:action_id="action.act_id"
:actor="action.actor"
:blocked="action.blocked"
:key="action.act_id"
#choose="planClick"
#fix="changeActor"
/>
</ul>
</div>
and I'm emitting a signal from the child component:
this.$emit('fix', {
act_id: this.action_id,
actor: this.actor
});
My question is:
how can I access and change the properties (for example actor) of this specific child component that emitted the signal? thanks in advance.
As per my understanding, You want to update the actor for the specific child in the parent component based on the act_id passed from child. If Yes, You can achieve this by iterating the original array object in the parent.
In the parent component, Your changeActor method should be like this :
In template :
#fix="changeActor($event)"
In script :
changeActor(emittedObj) {
store.plan.forEach(item => {
if (item.act_id === emittedObj.act_id) {
item.actor = emittedObj.actor
}
});
}
I have parent and child components and I am trying to pass props between them. the parent is called links and the child is link-encoded. I have the child like this in the html template
<links-encoded title="hellooo"></links-encoded>
and in vue file for the parent i have
data() {
return {
title:"helloooo"
}
on the child vue i have
export default class LinksEncodedComponent extends Vue {
props: ['title']
}
and in the child html
<p>{{title}}</p>
This is the proper way to bind title data property of the parent to the title prop of a child:
<links-encoded :title="title"></links-encoded>
fixed i had to put props: ['title'] inside #Component()
I have a wrapper component (waypoint) which collects child elements. On the child elements I want to set functions which should be executed from the wrapper component, how can I do that?
//page
//template
<v-waypoint>
<div
:data-wp-cb="animateIn"
// :data-wp-cb="animateIn.bind(this)"
class="js-wp"
//methods
animateIn() {
// do something
}
//waypoint component
update(el) {
const cb = el.dataset.wpCb
cb() // cb is not a function
}
How can I make this work?
You should solve it emitting the event from child to the parent.
Waypoint component:
update(param) {
this.$emit('update-from-child', param);
}
Page component:
<v-waypoint #update-from-child="localMethod">
<div
:data-wp-cb="animateIn"
// :data-wp-cb="animateIn.bind(this)"
class="js-wp"
This is how vue deals with child -> parent comunication. For more info, check the docs.
I need that when a user clicks a button on the child component the parent component receives cart.lenght to be assigned the count property of an element.
Child component code
<q-btn flat round color="faded" icon="fas fa-shopping-cart" #click="cart(item.id)"/>
cart: function (Id) {
let cart = []
cart.push(Id)
this.$emit('totalItensCart')
this.$q.localStorage.set('cart', cart)
}
How do I display the cart.length value in the count property that is in the parent component?
Parent component code
<q-route-tab
count="5"
icon="fas fa-cart-plus"
to="/cart"
exact
slot="title"/>
As per the vue event documentation, we want to emit an event from the child component to the parent component. You are correct with the this.$emit method, but it can take two parameters in order to pass data, like so:
this.$emit("name", data);
So, let's emit a count of the number of items in the cart from the first child:
this.$emit("cartUpdate", cart.length);
Now we need to handle this in the parent. We'll first need a data property to keep track of the totalCartItems in the parent:
data: function () {
return {
totalCartItems: null
}
}
Assuming that both of your code snippets are in different children of the same parent, and that the first child (the one that emits cartUpdate) has the component name first-child:
<first-child #cartUpdate="cartUpdate"></first-child>
This will call the cartUpdate() method in the parent component whenever the child emits an event called cartUpdate (using the # shorthand for v-on). The method is very simple, only updating the totalCartItems data property in the parent:
cartUpdate: function (totalCartItems) {
this.totalCartItems = totalCartItems;
}
Finally, let's ensure this gets updated in the second child component by binding it to the data value:
<q-route-tab
:count="totalCartItems"
icon="fas fa-cart-plus"
to="/cart"
exact
slot="title"/>
I have two components that are in a parent-child relationship. In the child select component I've defined a watcher for the currently selected value and I want the parent to get the updated value whenever it changes. I tried to use events but the parent can only listen to its own vm.
In the child component
watch: {
selected (value) {
this.$emit('selectedYearChange', value)
}
}
In the parent
mounted () {
this.$on('selectedYearChange', function (value) {
this.selectedYear = value
})
}
This obviously doesn't work because of the reason I mentioned above.
I wasn't able to find relevant examples in the documentation.
You can setup an event listener on the child component element itself where its used in the parent and pass it a method to be executed
//parent component
<div id="app>
<child-comp #selected-year-change='changeYear'></child-comp>
</div>
In your parent component use the method changeYear to change the value of `selectedYear'
methods:{
//you get the event as the parameter
changeYear(value){
this.selectedYear = value
}
}
See the fiddle
And avoid using camelCase for event names use kebab-case instead as HTML attributes are case-insensitive and may cause problems
html:
<Parent>
<Child #selected-year-change=HandleChange(data)></Child>
</Parent>
Javascript/Child Component:
watch: {
selected (value) {
this.$emit('selectedYearChange', value)
}
}
Javascript/Parent Component:
HandleChange: function(data){}
good luck. maybe work!