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

Question

我编写了这个 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;

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

Answer 1

v-for您的模板正在messages组件的data.&nbsp;但是，您正在分配this.data=response.data.&nbsp;那是data在组件实例上创建一个属性，而不是分配messages值。相反，只需更改this.data=response.data为this.messages=response.data.data.data如评论中所述，您的响应正文在根目录中包含一个数组，Axios 在 中返回响应正文response.data，因此response.data.data应该分配给this.messages.