0
Ich muss zwei Komponenten erstellen, die Daten gemeinsam nutzen. Ich mache eine Artikelliste und einen Artikelkorb, der die angegebenen Artikel hinzufügt oder löscht.Vue-Komponentendaten werden nicht aktualisiert
HTML:
<script>
var food_menu = '[{"cat":"Burgers","name":"Hamburger classic","text":"200g of meat with chips","price":"9,50"},{"cat":"Burgers","name":"Hamburger chili","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"12,50"},{"cat":"Burgers","name":"Chickenburger","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"10,50"},{"cat":"Burgers","name":"Chickenburger chili","text":"250g of meat with chips + drink (orange juice 0,5l)","price":"14,50"},{"cat":"Steaks","name":"Baconburger","text":"300g of meat with chips","price":"16,50"},{"cat":"Steaks","name":"Hotburger","text":"300g of meat with chips + drink (orange juice 0,5l)","price":"18,50"},{"cat":"Maxs","name":"Hotburger max","text":"450g of meat with chips","price":"21,50"},{"cat":"Maxs","name":"Chickenburger max","text":"450g of meat with chips","price":"15,50"}]';
</script>
<body>
<main>
<cart></cart>
<food :menu="menu"></food>
</main>
<script src="https://unpkg.com/vue"></script>
</body>
Die Karre Komponente:
const cart = Vue.component('cart', {
template: `
<div>
<pre>{{$data}}</pre>
</div>
`,
data() {
return {
items: []
}
},
created() {
this.$parent.$on("añadir", (item, index) => {
alert('asdasd')
if (typeof this.items[index] === "undefined") {
this.items[index] = item;
this.items[index].quantity = 1;
} else {
this.items[index].quantity++;
}
});
}
});
Die Artikelliste Komponente (It Works)
const food = Vue.component('food', {
props: ['menu'],
template: `
<div>
<div class="food-item" v-bind:class="item.cat" v-for="(item,index) in menu">
<h3>{{item.name}}</h3>
<a class="add-cart" v-on:click="addToCart(item, index)">Añadir al carro</a>
<p>{{item.text}}</p>
<span>{{item.price}}€</span>
</div>
</div>
`,
methods: {
addToCart(item, index) {
this.$parent.$emit('añadir', item, index);
}
}
});
und die getrennten Instanzen:
new Vue({
el: 'main',
data: {
menu: JSON.parse(food_menu)
},
components: {
'food': food,
'cart': cart
}
});
Wenn ich versuche "Elemente" zu ändern, ändert sich die Vorlage nicht.
https://jsfiddle.net/50l3r/wu0gjz2r/6/
Vielleicht möchten Sie Ereignisse, anstatt dass Kinder verwirren mit dem Element-Array versuchen direkt verwenden. – hayavuk
Ich verstehe nicht – 50l3r
https://vuejs.org/v2/guide/components.html#Using-v-on-with-Custom-Events – hayavuk