我正在尝试聊天，但我不知道如何点击一个模板中的项目 获取数据并将其传输到另一个。 从＃template1到＃template2
const app = new Vue({
el: '#content',
data:{
users: [],
messages: []
}
});
<template lang="html">
<li v-on:click="getMessages()">
<div class="content-container">
<span class="name">{{ user.first_name}} {{user.last_name}}</span>
<span class="txt"></span>
</div>
</li>
</template>
<script>
export default {
props: ['user'],
data: function() {
return {
messages: []
};
},
methods: {
getMessages(id) {
this.$http.get('/admin/chat/messages').then(function(res){
this.messages = res.data;
}
},
}
}
</script>
<template lang="html">
<ul class="chat">
<chat-message v-for="message in messages" :key="+message" :message="message"></chat-message>
</ul>
</template>
<script>
export default {
props: ['messages']
}
</script>
如何在此模板之间传递数据
结构是：
el: #content
<div id="content">
<div class="list-text" id="chatbox">
<user-list :users="users">#template1</user-list>
</div>
<div class="list-chat">
<chat-log :messages="messages">#template2</chat-log>
<chat-composer v-on:messagesent="addMessage"></chat-composer>
</div>
</div>
当我点击用户列表中的用户时 我试图加载来自该用户的消息 我不知道如何在聊天记录中传递它们