摘要:我显示了从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;
如果message
是通过外部操作(例如调用API)定义的,那么下面的代码将失败:
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
元素时静默失败?
答案 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/