Как посмотреть несколько свойств в компоненте Vue? - PullRequest
Новая
       10

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

0 голосов
/ 18 ноября 2018

Я пытаюсь обновить свойство компонента Vue, station, когда обновляется одно из нескольких других свойств.Это не будет работать как вычисляемое свойство, потому что вычисляемые свойства являются синхронными, и для этого требуется запрос API.

На основе ответа на вопрос в Vue core Я нашел документы на 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>

1 Ответ

0 голосов
/ 18 ноября 2018

Ваш наблюдатель возвращается в функции стрелки. Это должно быть как: 

this.$watch(
  () => {
     return {
       mode: this.mode,
       stationId: this.stationId,
       toDate: this.toDate,
       toTime: this.toTime
     }
  },

Этот код недействителен: 

() => return {

Функция Arrow неявно возвращает значение, если фигурная скобка не используется. Таким образом, вы также можете использовать как: 

this.$watch(
  () => ({
     mode: this.mode,
     stationId: this.stationId,
     toDate: this.toDate,
     toTime: this.toTime
  }),

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

...