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

Posted 2023-02-22

【中文标题】在 Vue.JS 中显示 Axios 响应数据

【英文标题】：Display Axios response data in Vue.JS

【发布时间】：2020-04-08 13:48:58

【问题描述】：

我编写了这段 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 收到的响应是（写在控制台上）：

  "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",
    ,

  ],

PHP的返回行是：echo $result; return $result;

由于某种原因，它没有在聊天视图中显示消息。我哪里出错了？

【参考方案1】：

您的模板正在对来自组件的data 的messages 对象执行v-for。但是，您分配的是this.data=response.data。这是在组件实例上创建属性 data，而不是分配 messages 值。

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

如 cmets 中所述，您的响应正文在根中包含一个 data 数组，而 Axios 在 response.data 中返回响应正文，因此应该将 response.data.data 分配给 this.messages。

【讨论】：

感谢您的回答。现在它打印两条空消息。我想访问树结构存在一些问题。我哪里出错了？

区分大小写。将模板中的 message.name 和 message.mesaage 改为 message.Name 和 message.Message。

还是不行。整个响应存储在“消息”中，使其形成一个树结构 messages->data->0->message=Something。

啊，所以您的数据在根目录下有一个data 属性？ axios 中的响应具有response.data 的响应正文。所以你需要做this.messages=response.data.data