Обзор:
Вы можете $emit event с обновленным списком вернуться к родительскому элементу, а затем обновить свойство data в родительском компоненте. Это потому, что вы не должны напрямую изменять props.
Пример:
В дочернем компоненте:
import io from 'socket.io-client';
data() {
return {
socket: io()
}
},
props: {
userList2: {
type: Array,
default: () => []
}
},
created() {
this.socket.on('update', (users) => {
this.$emit('updateListEv', users);
})
}
, затем в родительском компоненте:
<childNameComponent @updateListEv="updateList"></childNameComponent>
, тогда вам понадобится в родительском компоненте, чтобы фактически обновить свойство data данными, переданными обратно из дочернего компонента.
methods: {
updateList(updatedList) {
this.userList2 = updatedList
}
}
Примечание:
Вы должны иметь возможность использовать свой prop напрямую, если вы делаете это таким образом, поэтому нет необходимости устанавливать дополнительное свойство data в дочернем компоненте - userList: this.userList2.
В этом случае вы будете перебирать userList2 точно так же, как и сейчас - v-for="value in userList2"
Вы также можете видеть, что в этом случае , мы инициализируем сокет как свойство data, чтобы мы могли использовать его в нашем экземпляре Vue.
Изменить:
import io from 'socket.io-client';
data() {
return {
socket: io(),
usersList: this.userList2
}
},
props: {
userList2: {
type: Array,
default: () => []
}
},
created() {
this.socket.on('update', (users) => {
this.userList = users
})
}
в вашем HTML шаблоне l oop через список пользователей:
v-for="value in usersList"
Использование socket.io с Vue. js и Node.js полный пример:
В вашем бэкэнде (Node.js):
//setting up sockets
const app = express()
const server = http.createServer(app)
const io = require('socket.io')(server)
io.on('connection', (socket) => {
socket.on('sendUpdateList', function(data) {
io.emit('listUpdate', data)
});
})
Отправка обновления из компонента:
import io from 'socket.io-client';
data() {
return {
socket: io(),
usersList: []
}
},
methods: {
this.socket.emit('sendUpdateList', {usersList: this.usersList})
}
Прослушивание сокета в компоненте:
import io from 'socket.io-client';
data() {
return {
socket: io(),
usersList: []
}
},
created() {
this.socket.on('listUpdate', (data) => {
this.usersList = data.usersList
})
}