Question

我想知道如果道具是来自后端的响应，那么在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。我知道有两种方法可以解决这个问题：

<ChildComponent :person="person" v-if="person"></ChildComponent>
观看person道具，每次更改此人时，请重新运行子组件中的getName（）方法或将name设置为计算属性。

所以这又是个问题，它们是处理这个问题的正确方法吗？还有其他一些方法，比如使用Vuex吗？

Thx

Answer 1

这实际上取决于您的使用案例，如果您不想在该人准备好之前向其展示，那么v-if似乎是正确的方法。

如果要在人物对象准备好之前显示某些内容，您有两个选项：

为人员提供默认名称，或使用空名称
显示加载组件，直到此人准备好

Answer 2

这不是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() 
}

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

2 个答案: