I am currently working on a code snippet used to display messages exchanged between two users.
<template>
<main>
<form action="" method="post" @submit.prevent="sendMessage">
<textarea name="message" id="message" cols="30" rows="10" placeholder="Message"> </textarea>
<input type="submit" value="Send">
</form>
<section v-if="messages.length">
<div v-for="message in messages">
{{message.body}}
<hr>
</div>
</section>
<section v-else>
No messages
</section>
</main>
</template>
<script>
import ajax from './ajax';
export default {
data () {
return {
messages: []
}
},
methods: {
sendMessage(e){
},
getMessages(pageNum, cb){
ajax({
url: `${window.location.pathname}?p=${pageNum}`,
method: 'get',
callback(res){
cb(JSON.parse(res));
}
})
}
},
created(){
var vm = this;
vm.getMessages(1, (res) => {
vm.messages = res.data;
vm.loaded=true;
});
}
}
</script>
Regarding the v-for="message in messages" in the code snippet, I am looking for a way to display the messages without storing them in an array after rendering. The messages are read-only and will not require any event listeners. I plan to add a "load more" button that fetches 10 messages at a time and appends them to the existing messages.
If you have any suggestions on a more efficient way to implement this functionality or how I can display the messages without keeping them in an array, I would greatly appreciate it.
Thank you.