Question

摘要：我显示了从API获得的一些数据。由于调用的异步性质和各种刷新率，我不能假设当我从HTML代码中调用它时，data对象中的Vue可用。 有没有办法处理Vue.js中缺少的数据？

详细信息：

以下代码有效（输出hello world），因为在编译message.text实例期间定义了Vue：

＆＃13;

var vm = new Vue({
  el: '#root',
  data: {
    message: {
      text: "hello"
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="root">
  <span>{{message.text}}</span>
  <span>world</span>
</div>

＆＃13;

如果message是通过外部操作（例如调用API）定义的，那么下面的代码将失败：

＆＃13;

var vm = new Vue({
  el: '#root',
  data: {
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="root">
  <span>{{message.text}}</span>
  <span>world</span>
</div>

＆＃13;

我今天使用的解决方案是为data的位提供占位符（默认值），这些位将在我有机会使用实际值更新它们之前呈现，但这会使我的代码复杂化（并使其复杂化） data变得复杂。

有没有办法指示Vue.js在到达未定义的data元素时静默失败？

Answer 1

你可以使用v-if而不是渲染div，直到加载数据，如下所示：

var vm = new Vue({
  el: '#root',
  data: {
    message: {}
  },
  mounted () {
     var vm = this
     setTimeout(function(){
       vm.message = {'text' : 'Hello'}
     }, 400)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="root">
  <div v-if="message.text">
    <span>{{message.text}}</span>
    <span>world</span>
  </div>
</div>

如果您知道message数据的结构，则可以使用空字符串初始化它，并且不需要任何v-if或其他机制来防止此错误。

var vm = new Vue({
  el: '#root',
  data: {
    message: {
      text: ''
    }
  },
  mounted () {
     var vm = this
     setTimeout(function(){
       vm.message.text = 'Hello'
     }, 400)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="root">
  <div>
    <span>{{message.text}}</span>
    <span>world</span>
  </div>
</div>

Answer 2

你可以声明一个名为asyncData的变量并在数据进入时更新它，如果你声明一个空对象，如果密钥不存在，Vue不会抛出错误：< / p>

var vm = new Vue({
  el: '#app',
  data: {
    asyncData: {}
  }
});

然后，当数据到达时，您可以设置它并强制Vue实例重新渲染：

// Receive data
vm.asyncData['message'] = "Hello World!";
vm.$forceUpdate();

这里是JSFiddle：https://jsfiddle.net/tvzjsb7e/

如何处理（现在）缺少数据？

2 个答案: