javascript - Vue.js props 和其余调用

Question

我正在尝试将数据传递给我的子组件。数据由 ReST 调用(使用 axios)提供。

问题在于 ReST 调用是在数据函数之后执行的。

主视图:

<template>
  <div id="app">
    <div id="mainSection">
      <router-view :unit="unit" :config="config"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

var unit = 'test'
var config

axios.get('/unitConfiguration/' + unit)
  .then(function (response) {
    config = response.data
    console.log('rest call done')
  })

var data = {
  unit: unit,
  config: config
}

export default {
  name: 'App',
  components: {
  },
  data: function () {
    console.log('get data')
    data.config = config
    return data
  }
}

</script>

子组件:

<template>
  <div>
    <span>test3</span>
    <span>{{ unit }}</span>
    <span>{{ config.room }}</span>
  </div>
</template>

控制台输出为:

get data
rest call done
TypeError: t.config is undefined

如何使用 props 将 ReST 调用的结果传递给子组件？

Answer 1

可以先将config设置为null，在mounted钩子(Hook)中发出http请求，只有在响应发生后才设置config值。您无法控制http请求需要多长时间，因此，在您的组件中，您可能会考虑当'config'仍然为空时显示什么。

<script>
import axios from "axios";

var unit = "test";

var data = {
  unit: unit,
  config: null
};

export default {
  name: "App",
  components: {},
  data: function() {
    console.log("get data");
    return data;
  },
  mounted() {
    axios.get("/unitConfiguration/" + unit).then(response => {
      this.config = response.data;
      console.log("rest call done");
    });
  }
};
</script>