Vue.JS 从 JSON 对象打印空值

Question

我正在编写这段代码，其中 Vue.JS 模块调用一个 PHP 文件，该文件从外部服务器获取数据并返回 JSON 响应。我编写了一个循环，用于从 JSON 获取特定字段并以对话格式打印它们。但它只显示没有文本的空消息气泡(消息气泡的数量是正确的，但里面没有文本(。

这是我的代码：

const app = new Vue({
el: "#chatview",
data: {
data:[],
txtInput: '',
mid:0
},
methods:
{
GetBubbleType: function (name){
if(name === "Support")
return "yours messages";
else
return "mine messages";
},
},
mounted(){
axios.post(
'./ConversationGetter.php',
{
function2call: 'getRecord',
id: 1,
}
)
.then(response =>  {this.data=response.data.data;
console.log(response.data);
})
.catch(error => {});
},
template: `
<div style ="font-family:Open Sans;font-size:16px"> 
<div v-for="message in data">
<div class="fade-in">
<div v-bind:class="GetBubbleType(data.name)">
<div class="message last">
<p>{{data.message}}</p>
</div>
</div></div></div>  `
})

从 PHP 返回的响应：

{
"data": [
{
"Modified_Time": "2019-12-13T16:08:36+05:30",
"$currency_symbol": "$",
"Message": "Hey!",
"Created_Time": "2019-12-13T16:08:36+05:30",
"Name": "Me",
},
{
"Modified_Time": "2019-12-13T16:08:27+05:30",
"$currency_symbol": "$",
"Message": "Yo!",
"Created_Time": "2019-12-13T16:08:27+05:30",
"Name": "Me",
},
],
}

Answer 1

您应该调用该消息，因为您正在循环访问数据属性，因此应该{{message.Message}}不要{{data.message}}在段落标签内

当您遍历数据属性时，每个循环对象都包含消息元数据

{
"Modified_Time": "2019-12-13T16:08:27+05:30",
"$currency_symbol": "$",
"Message": "Yo!",
"Created_Time": "2019-12-13T16:08:27+05:30",
"Name": "Me",
},

您应该能够在 v-for 循环中访问像这样{{message.Message}}的每个object property