Question

我正在调用一个端点来返回一个对象，该对象确实获取数据，但是对于组件没有足够快的速度来获取数据和渲染。相反，组件使用空白值进行渲染，其中应该有数据。

如果我在创建时断开代码，然后可能在一秒后继续，文本正确呈现。

如何在数据恢复之前将其实现为不呈现？

我的API调用：

checkScenarioType: function () {
    this.$http.get('ScenariosVue/GetScenarioTypeFromParticipant/' + this.ParticipantId).then(response => {
        // get body data
        this.ScenarioType = response.body.value;
        if (this.ScenarioType.timeConstraint) {
            store.commit('switchConstraint');
        }
    }, response => {
        // error callback
    });
}

有问题的组件：

var questionArea = Vue.component('questionarea', {
    props: ["scenariotype"],
    data: function () {
        return ({
            position: "",
            vehicleType: ""
        });
    },
    methods: {
        transformValuesForDisplay: function () {
            switch (this.scenariotype.perspective) {
                case 1: {
                    this.position = "Driver";
                    this.vehicleType = "Autonomous";
                    break;
                }
                case 2: {
                    this.position = "Passenger";
                    this.vehicleType = "Manually Driven";
                    break;
                }
                case 3: {
                    this.position = "Driver";
                    this.vehicleType = "Manually Driven";
                    break;
                }
            }
        }
    },
    beforeMount() {
        this.transformValuesForDisplay();
    },
    template: 
    `<h1>You are the {{ this.position }}! What should the {{ this.vehicleType }} car do?</h1>`
});

Answer 1

在那些异步加载数据的情况下，我们通常使用简单的v-if来隐藏元素，直到数据存在。

模板如：

<h1 v-if="position">You are the {{ position }}! What should the {{ vehicleType }} car do?</h1>

请注意，不需要在模板中使用this。

此外，在您的情况下，您需要在道具中添加(deep/immediate) watch而不是beforeMount()挂钩，以便在外部加载时获取更改：

  watch: {
    scenariotype: {
      handler: function(newValue) {
            this.transformValuesForDisplay();
      },
      deep: true,
      immediate: true
    }
  },

以下完整演示。

＆＃13;

Vue.component('questionarea', {
  props: ["scenariotype"],
  data: function () {
    return ({
      position: "",
      vehicleType: ""
    });
  },
  methods: {
    transformValuesForDisplay: function () {
      switch (this.scenariotype.perspective) {
        case 1: {
          this.position = "Driver";
          this.vehicleType = "Autonomous";
          break;
        }
        case 2: {
          this.position = "Passenger";
          this.vehicleType = "Manually Driven";
          break;
        }
        case 3: {
          this.position = "Driver";
          this.vehicleType = "Manually Driven";
          break;
        }
      }
    }
  },
  watch: {
  	scenariotype: {
      handler: function(newValue) {
    		this.transformValuesForDisplay();
      },
      deep: true,
      immediate: true
    }
  },
  template: 
  `<h1 v-if="position">You are the {{ position }}! What should the {{ vehicleType }} car do?</h1>`
});

new Vue({
  el: '#app',
  data: {
  	ScenarioType: {perspective: null}
  },
  methods: {
    checkScenarioType: function () {
      this.$http.get('https://reqres.in/api/users/2').then(response => {
        // get body data
        this.ScenarioType.perspective = response.body.data.id; // for testing purposes only
      }, response => {
        // error callback
      });
    }
  },
  mounted: function() {
    this.checkScenarioType();
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-resource"></script>

<div id="app">
  <p>Notice while it is null, the h1 is hidden: {{ ScenarioType }}</p>
  <br>
  <questionarea :scenariotype="ScenarioType"></questionarea>
</div>

＆＃13;

获取组件以在呈现之前等待异步数据

1 个答案: