Как получить доступ к данным компонента Vue из метода компонента
Я новичок в Vue, и я не понимаю, почему я не могу получить доступ к свойству данных из метода в одном и том же компоненте. Каждый раз, когда я пытаюсь получить доступ к своим данным с помощью «this.items», он возвращает, что «элементы не определены».
Я пытался изменить синтаксис того, как я пишу методы (сначала я использовал функцию стрелки, но, узнав, что она меняет «это», переключился на определение обычной функции), но он по-прежнему возвращает элементы как неопределенные.
Вот мой полный компонент с шаблоном:
<template>
<div>
<ul>
<li v-for = "(item, index) in items" :key = "index">
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
'items': []
};
},
methods: {
addItem: function(t) {
this.items.push(t)
}
},
}
</script>
Это всего лишь простой список дел, и у меня есть другой компонент, вызывающий эту функцию и передающий параметр в 'addItem()'.
Спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот рабочая версия вашего кода, демонстрирующая, как отображать items и добавлять новый элемент в массив items из пользовательского интерфейса:
https://codesandbox.io/embed/vue-template-7j0xj?fontsize=14
Или, если хотите, код компонента Vue также прикреплен ниже:
<template>
<div id = "app">
<div>Hello</div>
<ul v-if = "items">
<li v-for = "(item, index) in items" :key = "index">
<div>{{item}}</div>
</li>
</ul>
<div @click = "addItem('Something More')">Click to Add Something</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: ['foo','bar','baz']
};
},
methods: {
addItem: function(t) {
this.items.push(t)
}
},
};
</script>
Самый простой способ связи между компонентами — это использование emit.
Например: это ваш родительский или дочерний компонент, для этого метода это не имеет значения.
<template>
<div>
<ul>
<li v-for = "(item, index) in items" :key = "index">
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
'items': []
};
},
mounted(){
this.eventHub.$emit('add_item:method', this.addItem);
},
methods: {
addItem: function(t) {
this.items.push(t)
}
},
}
</script>
и другой компонент метода прослушивания событий для этого способа.
<template>
</template>
<script>
export default {
mounted(){
this.eventHub.$on('add_item:method');
},
}
</script>