![](/img/trans.png)
[英]Vue.js - axios is undefined when trying to store and display vue-axios response data
[英]Display Axios response data in Vue.JS
我编写了这个 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;
echo $result; return $result;
出于某种原因,它没有在聊天视图中显示消息..我哪里出错了?
您的模板正在对来自组件data
的messages
对象执行v-for
。 但是,您正在分配this.data=response.data
。 那是在组件实例上创建属性data
,而不是分配messages
值。
相反,只需将this.data=response.data
更改为this.messages=response.data.data
。
正如在评论中指出,你的反应体包含一个data
在根阵列,以及爱可信返回响应主体在response.data
,因此response.data.data
就是应该分配给this.messages
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.