Я пытаюсь обновить свойство компонента Vue, station, когда обновляется одно из нескольких других свойств. Это не будет работать как вычисляемое свойство, потому что вычисляемые свойства синхронны, а для этого требуется запрос API.
Основываясь на ответ на вопрос в ядре Vue, я нашел документы на vm.$watch. Это похоже на то, что мне нужно, но я не могу понять, как это должно быть реализовано в контексте этого компонента.
Я думаю, мне следует использовать this вместо vm в документации, но я не уверен в этом. С другой стороны, использование this в левой части стрелочной функции, которая является первым параметром $watch, вызывает такие ошибки, как Invalid left-hand side in arrow function parameters.
Я использую vm.$watch ближе к концу следующего кода компонента. Я все время получаю ошибку: Failed watching path: "[object Object]" Watcher only accepts simple dot-delimited paths. For full control, use a function instead. (я думал, что был ...)
<template lang = "html">
<div>
{{ station }}
</div>
</template>
<script>
import ApiService from '@/services/ApiService';
export default {
name: 'Chart',
props: {
mode: String,
toDate: String,
toTime: String
},
data() {
return {
stationId: 3069,
station: {}
};
},
watch: {
station: function() {
// Render function
}
},
methods: {
getInfo: async function(opts) {
const stationData = await ApiService[this.mode]({
id: opts.id,
toTime: `${opts.toDate}T${opts.toTime}`,
fromTime: `${opts.fromDate}T${opts.fromTime}`
})
.then(res => {
return res.data.station.properties;
})
.catch(err => {
console.error(err);
return {};
});
return stationData;
}
},
created: function() {
// MY WATCHING STARTS HERE
this.$watch(
() => return {
mode: this.mode,
stationId: this.stationId,
toDate: this.toDate,
toTime: this.toTime
},
async function(data) {
this.station = await this.getInfo({
mode: data.mode,
id: data.stationId,
toDate: data.toDate,
toTime: data.toTime
}).then(res => {
return res;
});
}
);
}
};
</script>



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваш наблюдатель возвращается в виде стрелки. Должно получиться так:
this.$watch(
() => {
return {
mode: this.mode,
stationId: this.stationId,
toDate: this.toDate,
toTime: this.toTime
}
},
Этот код недействителен:
() => return {
Стрелочная функция неявно возвращает значение, если фигурная скобка не используется. Итак, вы также можете использовать:
this.$watch(
() => ({
mode: this.mode,
stationId: this.stationId,
toDate: this.toDate,
toTime: this.toTime
}),
Обратите внимание, скобки используются для возврата объекта. Вы также можете прочитать эта почта дальше.
Конечно, это было что-то вроде этого глупого. Спасибо!