У меня есть компонент формы, который должен добавлять новые данные в экземпляр приложения root Vue. Форма компонента выглядит как
Vue.component('new-item-form', {
template: '<form action="" @submit.prevent="formSubmit">' +
'<input v-model="newCategoryName" type="text" value="">' +
'<input type="submit" value="Add new item">' +
'</form>',
props: [
],
data: function () {
return {
newCategoryName: null
}
},
methods: {
formSubmit: function()
{
alert('aaaaaaaaaaaaaaaaa');
this.$emit('addItemEvent', this.newCategoryName);
}
}
});
, а вот код приложения
let app = new Vue({
el: '#app',
data: {
dude: 'Jack Frost',
vueAppCategories: [
{foreach $categories as $c}
{* Vytvorý js objekt *}
{ title: {$c->title}, status: {$c->status}, priority: {$c->priority} }
{sep}, {/sep}
{/foreach}
],
},
methods: {
'addItem': function($event) {
alert('bbbbbbbbbbbbbbbbbb');
this.vueAppCategories.unshift({ title: $event, status: 55, priority: 100 });
}
}
});
Метод formSubmit отлично работает и показывает предупреждение. Но я не знаю, как подключить addItemEvent к приложению root Vue, которое должно изменять данные root. Как подключить addItemEvent к приложению? Спасибо.