Question

当其他几个属性之一更新时，我正在尝试更新Vue组件属性station。它不能用作计算属性，因为计算属性是同步的，并且需要API请求。

基于issue reply in 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>

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

注意，括号用于返回对象。您可能还想进一步阅读this post。

如何在Vue组件中观看多个属性？

1 个答案: