Dom Vue Js在模式内单击并追加获取数据

我有两个组件，一个是父组件，另一个是子组件，它是一个模式弹出窗口

父组件

<parent-component>

      <!-- this is a modal popup -->
      <child-component v-bind:message="childMessage"></child-component>

      <a href="#" @click="openModal(5)">Open model</a>

</parent-component>
<script>
   export default {
      data: function() {
        return {
           childMessage:{}
        }
      },
      methods:{
       openModal: function(id){
            axios.get('api/message/'+id)
                .then(response => {
                    this.childMessage = response.data;
                })
                .catch(error => {
                    console.log(error);
            })
            this.showModal = true
        }
     }
   }
</script>

<!-- this is a popup modal -->
<child-component>
    <h1>{{ message.title }}</h1>
</child-component>
<script>
   export default {
  props:{
    message: {},
  }
</script>

导出默认值{
数据：函数（）{
返回{
子消息：{}
}
},
方法：{
OpenModel:函数（id）{
axios.get（'api/message/'+id）
。然后（响应=>{
this.childMessage=response.data；
})
.catch（错误=>{
console.log（错误）；
})
this.showModal=true
}
}
}

---

子组件

<parent-component>

      <!-- this is a modal popup -->
      <child-component v-bind:message="childMessage"></child-component>

      <a href="#" @click="openModal(5)">Open model</a>

</parent-component>
<script>
   export default {
      data: function() {
        return {
           childMessage:{}
        }
      },
      methods:{
       openModal: function(id){
            axios.get('api/message/'+id)
                .then(response => {
                    this.childMessage = response.data;
                })
                .catch(error => {
                    console.log(error);
            })
            this.showModal = true
        }
     }
   }
</script>

<!-- this is a popup modal -->
<child-component>
    <h1>{{ message.title }}</h1>
</child-component>
<script>
   export default {
  props:{
    message: {},
  }
</script>

{{message.title}}
导出默认值{
道具：{
信息：{}，
}

---

在父组件中，我同时触发模式和请求ajax。 我可以将ajax数据正确地传递给子组件

但是如果我打开控制台，就会出现错误

无法读取未定义的属性“title”

（虽然我可以看到数据运行良好，并且已经在html页面中）

似乎附加数据

{{childMessage.title}}

首先运行（在ajax请求之前）

1-如何正确地追加数据，可能是在ajax请求之后

---

2-是否需要检查未定义值的条件？

在这种情况下，您必须检查

未定义值的条件，因为子组件是在
消息
API调用结束之前呈现的。您可以这样做

<child-component>
    <h1 v-if = "message">{{ message.title }}</h1>
</child-component>


{{message.title}}
我不知道您在哪里使用
showmodel
，但我认为这是一种显示或不显示
子组件的开关。如果是这种情况，则错误可能来自于在调用API之后将
showmodel
设置为true。但是此调用是异步的，您可能应该将
this.showmodel>移动=true
在成功回调中，位于
this.childMessage=response.data；
下。
如果执行此操作，则在呈现子组件时将初始化消息prop

还要注意你的道具类型，因为@ittus-idention
message
似乎是一个字符串，根据
子组件中的默认值，但你可以将其用作模板中的对象。
v-bind:message=“childMessage”
，而不是
这个.childMessage
很抱歉输入错误，我已经更改了它。我可以正确地获取数据，问题是控制台中的错误-“无法读取未定义的属性'title'。您能在
响应中显示数据吗？顺便说一句，
道具：{message:{}
，您的
消息是一个对象，而不是字符串。因为我已经获得了数据，问题不是我的输入错误。很抱歉我在这个问题上犯了错误。这是示例组件。感谢您帮助我@ittus，这是一个技巧：D，我在ajax调用后运行showModal，但它不起作用。现在，我在成功cal中移动showModallback，错误消失了。谢谢@budgw。