我編寫了這個(gè) Vue.JS 代碼來以對(duì)話格式顯示從 PHP 文件收到的 JSON 響應(yīng)。我當(dāng)前的代碼如下所示: 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 收到的響應(yīng)是(寫在控制臺(tái)上):{ "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;出于某種原因,它沒有在聊天視圖中顯示消息。我哪里出錯(cuò)了?
1 回答

幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
v-for
您的模板正在messages
組件的data
. 但是,您正在分配this.data=response.data
. 那是data
在組件實(shí)例上創(chuàng)建一個(gè)屬性,而不是分配messages
值。
相反,只需更改this.data=response.data
為this.messages=response.data.data
.
data
如評(píng)論中所述,您的響應(yīng)正文在根目錄中包含一個(gè)數(shù)組,Axios 在 中返回響應(yīng)正文response.data
,因此response.data.data
應(yīng)該分配給this.messages
.
- 1 回答
- 0 關(guān)注
- 120 瀏覽
添加回答
舉報(bào)
0/150
提交
取消