Presented below is the HTML code structure
<template>
<div id="left_container" ref="usersContainer">
<button v-for="user in users" :key="user.userID" >{{ user.username }}</button>
</div>
<div id="right_container">
<ul id="messages"></ul>
<div id="bottom_container">
<label id="lt"></label>
<form id="form" @submit.prevent="onSubmit" action="">
<input id="input" v-model="in_msg" autocomplete="off" v-on:input="vChanged"/><button>Send</button>
</form>
</div>
</div>
</template>
<script>
import socket from "../socket"
export default {
name: "MyChat",
components: {
},
data() {
return {
in_msg:'',
users: [],
selectedUser: null,
};
},
methods: {
onSubmit()
{
console.log(this.users);
if(this.selectedUser)
{
var content = this.in_msg;
socket.emit("private message", {
content,
to: this.selectedUser.userID,
});
}
else{
if (this.in_msg) {
socket.emit('chat message', this.in_msg);
this.in_msg = '';
}
}
},
vChanged()
{
socket.emit('on_c');
},
},
created()
{
var messages = document.getElementById('messages');
var lbl_writing = document.getElementById('lt');
socket.on('chat mess', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on("private message", ({ content, from }) => {
var msg = from + " : " + content;
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('chat message not', function(msg) {
lbl_writing.textContent = msg;
});
socket.on('users',function(users)
{
this.users = [...users];
console.log(this.users);
//const dlv = document.getElementById('left_container');
//dlv.innerHTML = '';
// this.users.forEach(user => {
// const button = document.createElement('button');
// button.innerHTML = user.username;
// //button.addEventListener('click',this.onClick(user));
// //dlv.appendChild(button);
// });
});
socket.on('user connected',function(user)
{
this.users.push(user);
// const dlv = document.getElementById('left_container');
// //dlv.innerHTML = '';
// const button = document.createElement('button');
// button.innerHTML = user.username;
// //button.addEventListener('click',this.onClick(user));
// dlv.appendChild(button);
})
}
};
</script>
<style scoped>
#left_container {width: 19vw;position: absolute;top: 0;bottom:0; background-color: white;border: dashed black;display: flex;flex-direction: column;}
#right_container {width: 80vw;display: flex; background-color:white;flex-direction: column;position: absolute;margin-left: 19.5vw;top:0;bottom: 0;}
#bottom_container { display: flex; position: absolute; bottom: 0;left: 0;right: 0; flex-direction: column;}
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#pv { background-color: red;color: #fff;}
#lt { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#lo { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
.user-button {
background-color: blue;
color: white;
}
</style>
The issue arises when trying to update the 'users' array within the template section as it's not reflecting any changes despite attempts made in socket.on('users'). Even after execution of that function, the 'users' array remains empty.