Question

我有一个调用多个请求并显示该数据的应用程序。一切正常，但是出现一些错误，我无法弄清楚问题出在哪里。

所以我有两个组成部分：

--App :Parent
---Events :Children

在App.vue中调用子组件：

<Events :events="gameInfo" :results="results" @startNewGame="startNewGame" />

提供道具“ gameInfo”，“结果”并收听“ startNewGame”事件。

当应用程序首次在App.vue中加载时，我正在调用函数：

// Get Next Game
    getNextGame() {
      this.gameInfo = [];
      RouletteApi.getNextGame().then(response => {
        this.gameInfo.push({ response });
      });
   }

该子组件接收并显示数据。

在儿童部分：

<script>
export default {
  name: "Events",
  props: ["events", "results"],
  data() {
    return {
      GameStartTime: null,
      GameId: null,
      GameUUID: null
    };
  },
  watch: {
    events: function(newVal, oldVal) {
      this.GameStartTime = newVal[0]["response"].fakeStartDelta--;
      this.GameId = newVal[0]["response"].id;
      this.GameUUID = newVal[0]["response"].uuid;
    }
  },
  created() {
    setInterval(() => {
      if (this.GameStartTime > 0) {
        this.GameStartTime = this.events[0]["response"].fakeStartDelta--;
      } else {
        this.$emit("startNewGame", this.GameUUID); -- call to parent function
      }
    }, 1000);
  }
};
</script>

我正在观察，获取数据并设置计时器，以从父级执行“ startNewGame”功能，这将再次调用api并为子级提供新数据。

计时器到期后，我从父级调用“ startNewGame”函数：

startNewGame(uuid) {
  this.startSpinning();

  RouletteApi.startNewGame(uuid).then(response => {
    if (response.result == null) {

      setTimeout(function() {
        startNewGame(uuid);
      }, 1000);

    } else {
      this.results.push({ response });

      this.gameInfo = []; -- resetting that previous dat 
      this.getNextGame(); -- call to first function in example
    }
  });

检查响应是否为空，然后设置超时并调用该函数，直到响应不为空。如果响应不为空，则不是我推动子项结果，请重置该gameInfo数组，然后再次调用getNextGame（）函数，该函数将调用请求并为子项组件中的timer设置新值。

RouletteApi.js：

import axios from 'axios'

export default {
  getLayout() {
    return axios.get('/configuration')
      .then(response => {
        return response.data
      })
  },

  getStats() {
    return axios.get('/stats?limit=200')
      .then(response => {
        return response.data
      })
  },

  getNextGame() {
    return axios.get('/nextGame')
      .then(response => {
        return response.data
      })
  },

  startNewGame(uuid) {
    return axios.get('/game/' + uuid)
      .then(response => {
        return response.data
      })
  }
}

错误：

Error in callback for watcher "events": "TypeError: Cannot read property 'response' of undefined"

TypeError: Cannot read property 'response' of undefined
    at VueComponent.events (Events.vue?5cf3:30)

Uncaught ReferenceError: startNewGame is not defined

我从“监视”部分的子级组件获得前两个错误。在父组件的setInterval中调用函数时的最后一个。

Answer 1

在api调用完成之前，观察程序似乎正在运行。控制台记录新值以查看得到的结果。尝试检查newVal是否为null或为空数组，然后设置值。

父母与子女之间的交流中的“ Vue.js”错误

1 个答案: