什么是正确的方式来处理Vue.js道具从后端的响应

我想知道如果道具来自后端的响应，什么是处理Vue.js道具的正确方法？什么是正确的方式来处理Vue.js道具从后端的响应

好吧，让我们说，孩子组件具有prop称为person。一个name是人的对象。

<template> 
     {{ person.name }} 
    <template> 

    <script> 
    export default { 
     name: 'ChildComponent', 
     props:['person'], 
     created(){ 
      this.getName(); 
     }, 
     data(){return{name:''}}, 
     methods:{ 
      getName(){ 
      this.name = this.person.name; 
      } 
    } 

    </script>

父组件是这样

<template> 
     <ChildComponent :person="person"></ChildComponent> 
    <template> 

    <script> 
    export default { 
     name: 'ParentComponent', 
     created(){ 
      this.getPerson(); 
     } 
     data(){ 
      return { 
      person: null 
      } 
     }, 
     methods:{getPerson(){ 
      // send request to server or api then update name 
      sendrequest().then(person => { this.person = person}); 
     }} 
    </script>

起初，之前得到的回应，会有一个警告can't get name from person。我知道2层的方法来处理这个问题：

<ChildComponent :person="person" v-if="person"></ChildComponent>
手表person支撑在，每个人改变时，重新运行childcomponent的getName（）方法或设置名称作为计算属性。

因此，这里的问题再一次，他们在处理这个正确的方法是什么？还有其他一些方法，如使用Vuex？

Thx

来源

2017-07-27 YI YANG

这不是vue警告。基本上，这是JavaScript错误TypeError: Cannot read property 'name' of null，这VUE可以显示你的警告。你的1变种是okey。同<div v-if="person">{{person.name}}</div>在你的孩子。你也可以用一些东西填满你的人喜欢

return { 
    person: {name: 'loading...'} 
}

，并在您的父母

mounted: function() { 
    // your person will be loaded when component mounted 
    this.getPerson() 
}

来源

2017-07-27 15:05:32

这真的取决于你的使用情况，如果你不希望显示的人，直到它已准备就绪然后v-if似乎是一个正确的路要走。

如果你想显示的东西，直到人物对象是准备好你有2种选择：

给人默认名称，或用空的名字初始化它
显示加载组件，直到人准备好

来源

2017-07-27 15:26:41 Tomer

什么是正确的方式来处理Vue.js道具从后端的响应

回答

相关问题