Как просмотреть несколько свойств в компоненте Vue?

Я пытаюсь обновить свойство компонента 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
4 178
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш наблюдатель возвращается в виде стрелки. Должно получиться так:

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
  }),

Обратите внимание, скобки используются для возврата объекта. Вы также можете прочитать эта почта дальше.

Конечно, это было что-то вроде этого глупого. Спасибо!

alexbea 18.11.2018 17:11

Другие вопросы по теме