如何处理(现在)缺少数据?

时间:2017-01-02 13:15:32

标签: javascript vue.js

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

详细信息:

以下代码有效(输出hello world),因为在编译message.text实例期间定义了Vue



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

<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;
&#13;
&#13;

如果message是通过外部操作(例如调用API)定义的,那么下面的代码将失败:

&#13;
&#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;
&#13;
&#13;

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

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

2 个答案:

答案 0 :(得分:0)

你可以使用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>

答案 1 :(得分:0)

你可以声明一个名为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/