Javascript 在Vue.JS中显示Axios响应数据

我编写这个Vue.JS代码是为了以对话格式显示从PHP文件收到的JSON响应。我当前的代码如下所示：

    const app = new Vue({
    el: "#chatview",
    data: {
            messages:[],
            txtInput: '',
            mid:0
        },
    methods:{

    GetBubbleType: function (name){     
                    if(name === "AI")
                     return "yours messages";
                    else
                     return "mine messages";
                },
   },   
   mounted(){
        axios.post('./ConversationGetter.php',{
            function2call: 'getRecord',
            id: 1,
        }).then( response =>  {console.log(response.data);
         this.data=response.data;
        }).catch(error => {});

        },      
  template: `
  <div style ="font-family:Open Sans;font-size:16px">
  <div v-for="message in messages">
    <div class="fade-in">
      <div v-bind:class="GetBubbleType(message.name)">
        <div class="message last">
          <p>{{message.message}}</p>
        </div>
      </div>
    </div>
  </div>
  <form @submit.prevent="sendMessage('out')"  id="person-form">
    <p>
      <input type="text" placeholder="Enter Your Query Here"style=" border-radius=25px" v-model="txtInput">
      </input>
      <input type="submit" placeholder="Send"style=" border-radius=25px">
      </input>
    </p>
  </form>
</div>

  `
})

PHP的返回行是：

echo$result；返回$result

由于某些原因，它不会在聊天视图中显示消息。。哪里出错了？
您的模板正在对组件的
数据中的
消息
对象执行
v-for
。但是，您正在分配
this.data=response.data
。这是在组件实例上创建属性
数据
，而不是分配
消息
值

相反，只需将
this.data=response.data
更改为
this.messages=response.data.data

如注释中所述，您的响应正文在根目录下包含一个
数据
数组，Axios在
响应.数据
中返回响应正文，因此，
response.data.data
是应该分配给
此.messages
的。您的模板正在组件的
数据的
messages
对象上执行
v-for
。但是，您正在分配
this.data=response.data
。这是在组件实例上创建属性
数据
，而不是分配
消息
值

相反，只需将
this.data=response.data
更改为
this.messages=response.data.data

如注释中所述，您的响应正文在根目录下包含一个
数据
数组，Axios在
响应.data
中返回响应正文，因此
响应.data.data
是应该分配给
此消息的内容。感谢您的回答。现在它打印两条空消息。我想在访问树结构时会出现一些问题。。我哪里出错了？区分大小写。将模板中的
message.name
和
message.mesage
更改为
message.name
和
message.message
。仍然不起作用。整个响应存储在“messages”中，形成一个树结构messages->data->0->message=Something.Ah，那么您的数据在根目录下有一个
data
属性？axios中的响应主体位于
response.data
。因此，您需要执行
this.messages=response.data.data
谢谢您的回答。现在它打印两条空消息。我想在访问树结构时会出现一些问题。。我哪里出错了？区分大小写。将模板中的
message.name
和
message.mesage
更改为
message.name
和
message.message
。仍然不起作用。整个响应存储在“messages”中，形成一个树结构messages->data->0->message=Something.Ah，那么您的数据在根目录下有一个
data
属性？axios中的响应主体位于
response.data
。因此，您需要执行
this.messages=response.data.data
{
  "data": [
    {
      "Modified_Time": "2019-12-13T16:08:36+05:30",
      "$currency_symbol": "$",
      "Message": "Hey!",
      "Created_Time": "2019-12-13T16:08:36+05:30",
      "Name": "AI",
    },
    {

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

  ],
}