我編寫了這個 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 回答

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