Vue.js + socket.io 如何更新道具

这是我为 Vue 的用户列表组件。 Socket.io 返回当前活动用户的列表，例如 [{name：Fluxed，rank：Admin}]，我希望它自动更新元素。如何更新道具元素并使其显示更改？

这是我的代码

<template>
<div id="app">
<div>
<div style="float:right;width:30%;border-left:1px solid black;padding:1%;">
<b>Users</b>
<b-list-group style="max-width: 300px;" >
<b-list-group-item class="align-items-center" v-for="value in userList2" v-bind:key="value.name" >
<b-avatar class="mr-3"></b-avatar>
<span class="mr-auto">{{ value.name }}</span>
<b-badge>{{ value.rank }}</b-badge>
</b-list-group-item>
</b-list-group>
<ul class="list-group">
</ul>
</div>
</div>
</div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
import io from 'socket.io-client';
import $ from 'jquery'
var socket = io('http://localhost:4000');
socket.on('update', function (users){
this.userList = users;
console.log(this.userList)
}) 
import VueJwtDecode from "vue-jwt-decode";
export default {

name: 'app',
props: {
userList2: {
type: Array,
default: () => []
}
},
data() {

return {
user: {},
componentKey: 0,
userList: this.userList2,

};
},

created () {
// get socket somehow
socket.on('update', function (users){
console.log(this.userList)
this.userList = users;
console.log(this.userList)
}) 
},
methods: {
async getUserDetails() {
let token = localStorage.getItem("jwt");
let decoded = VueJwtDecode.decode(token);
let response = await this.$http.post("/update", decoded);
let urank = response.data.rank;
this.user = decoded;
this.user.rank = urank;
},
logUserOut() {
localStorage.removeItem("jwt");
this.$router.push("/");
},

},
}
</script>

一旦 socket.io 发生更改，如何使 Vue 引导组项自动更新？

概述：

您可以将更新的列表$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模板中循环浏览用户列表：

v-for="value in usersList"

将 socket.io 与 Vue.js 和 Node.js 完整示例：

在后端(节点.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
})
}

这有点难说，因为我们无法运行您的代码，但是快速浏览一下它，我认为它就像这样简单：

将v-for="value in userList2"中的userList2替换为userList。

如果你打算更多地使用sockets和Vue，我认为 vue-socket.io 是一个非常有用的库： https://www.npmjs.com/package/vue-socket.io

socket.on('update'回调中的this不是你想象的那样(它不是 vue 组件(，所以分配给this.userList不会触发 vue 组件中的任何更改(。

使用and 箭头函数作为回调，以便它使用周围的this(这是您的组件(，如下所示：

import io from 'socket.io-client';
import $ from 'jquery'
import VueJwtDecode from "vue-jwt-decode";
var socket = io('http://localhost:4000');
export default {
name: 'app',
props: {
userList2: {
type: Array,
default: () => []
}
},
data() {

return {
user: {},
componentKey: 0,
userList: this.userList2,

};
},

created () {
socket.on('update', users => {      // arrow function here so 'this' keyword inside will refer to your vue component
this.userList = users;            // either this one
this.userList2 = users;           // or this one (I don't know why you are using two props for this btw)
}) 
},
// ...
}

阅读更多关于this以及为什么箭头函数没有它们在另一个SO问题："this"关键字如何工作？

相关内容

最新更新

热门标签：