У меня есть функциональность (getAllData
, который делает внешний запрос данных), которые нужно вызвать в двух случаях: когда компонент установлен и когда prop
изменение.
Тем не менее, я получаю TypeError: this.getAllData is not a function
при использовании в watch
и mounted
.
Поскольку методы могут быть вызваны из методов, мне интересно, справедливо ли это для методов, вызываемых из таких компонентов, как watch
или mounted
.
Мой (упрощенный) экземпляр приведен ниже:
export default {
props: ['triggerReload'],
data: function () {
return {
// some variables
}
},
watch: {
triggerReload: this.getAllData()
},
methods: {
getAllData: function () {
// this function correctly fetches external data
}
},
mounted: this.getAllData()
}
Моим обходным путем будет либо дублировать код функции (которая не является СУХОЙ) или для вызова внешней функции (определенной вне экземпляра Vue, которая, вероятно, также является анти-шаблоном) EDIT: это компонент, поэтому я не знаю, как вызвать внешнюю функцию и ссылаться на экземпляр (он не создается экземпляром var vm = new Vue(...)
)
Да, вы можете, у вас просто неправильный синтаксис:
...
mounted () {
this.getAllData()
}
который является просто сахаром ES6 для
mounted: function mounted () {
this.getAllData()
}
В вашей версии вы связываете mounted
на this.getAllData
при создании компонента объекта, так this
будет ссылаться на текущий объект, который не имеет getAllData
метода. Вам нужно сделать это в функции вместо этого, так что Vue может сделать свою магию и привязать this
к правильному компоненту Vue.
this
?