javascript - 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

您应该调用该消息，因为您正在循环访问 data 属性，因此它应该是 {{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}} 一样访问每个对象属性