Why is my $emit not transfering my id and working right
i have an id emitted in my component but in the parent component the id is then suddenly undefined. but it is definitely defined. i wonder why the id is suddenly undefined after the emit and is not passed correctly. does anyone there have an answer for me?
here is my code:
productTile:
<div >
<h3>{{name}}</h3>
<tile-header></tile-header>
<tile-body :infos="infos" :price="price"></tile-body>
<button @click="select()">Tarif auswählen</button>
</div>
`,
data() {
return {
}
},
props: {
name: "",
id: null,
isSelected: false,
price: 0,
infos: []
},
methods: {
select() {
this.$emit("product-selected", this.id);
}
}
productGroup:
<div >
<h2>{{groupId}}</h2>
<product-tile v-for="product in products" :key="product.SKU"
:name="product.Name"
:price="product.Preis"
:isSelected="product.AuswahlStatus"
:infos="product.USPs"
:id="product.SKU" @product-selected="updateGroup()"></product-tile>
</div>
`,
data() {
return {
}
},
props: {
groupId: "",
products: []
},
methods: {
updateGroup(productId) {
if (productId === undefined) {
console.warn("Produkt ID is undefined");
} else {
console.warn("Produkt ID is defined-> ", productId);
this.$emit("update-group", productId, this.groupId)
}
}
}
Updated 2022-01-14 13:20:43Z by
Lenjah
@product-selected="updateGroup(product.SKU)"
you need't to pass id with $emit 'cause you have it in the for loop
Updated 2022-01-14 13:26:53Z by
Денис Бочков
Tags:
vue javascriptvue javascript in templatevue javascript tutorialvue javascript in htmlvue javascript classvue javascript vs typescriptvue javascript heap out of memoryvue javascript to typescriptvue javascript examplevue javascript alertvue.jsvue.js tutorialvue.js vs reactvue.js devtoolsvue.js not detectedvue.js examplesvue.js vs angularvue.js watchvue.js propsvue.js interview questionsvue eventsvue events emitvue events incvue events between componentsvue events mountedvue events bubble upvue events at rialtovue events calendarvue eventsourcevue events not workingvue event handlingvue event handler with parametervue event handler naming conventionvue event handlers listvue event handler conditionalvue event handler asyncvue event handler on slotvue event listener on componentvue event listener not workingvue event listener scrollvue componentvue component lifecyclevue component libraryvue component propsvue component examplevue component tagvue component namevue component not renderingvue component naming conventionsvue component inheritance