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

这是我的Vue用户列表组件。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>

使用者
{{value.name}
{{value.rank}


从“socket.io客户端”导入io；
从“jquery”导入$
变量套接字=io（'http://localhost:4000');
socket.on（'update'，函数（用户）{
this.userList=用户；
console.log（this.userList）
}) 
从“vue jwt decode”导入VueJwtDecode；
导出默认值{
名称：“应用程序”，
道具：{
用户列表2：{
类型：数组，
默认值：（）=>[]
}
},
数据（）{
返回{
用户：{}，
componentKey:0，
userList:this.userList2，
};
},
创建（）{
//不知怎么弄到插座了
socket.on（'update'，函数（用户）{
console.log（this.userList）
this.userList=用户；
console.log（this.userList）
}) 
},
方法：{
异步getUserDetails（）{
让token=localStorage.getItem（“jwt”）；
let decoded=VueJwtDecode.decode（令牌）；
让response=等待此消息。$http.post（“/update”，已解码）；
让urank=response.data.rank；
this.user=已解码；
this.user.rank=urank；
},
logUserOut（）{
localStorage.removietem（“jwt”）；
这是。$router.push（“/”）；
},
},
}

---

如何在socket.io发生更改时自动更新Vue引导程序组项？

这有点难说，因为我们无法运行您的代码，但快速查看一下，我认为它就这么简单：

将

v-for=“userList2中的值”

中的

userList2

替换为

userList

如果您打算更多地使用套接字和Vue，我认为Vue-socket.io是一个非常有用的库：

---

概述：

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
  })
}

您可以使用更新的列表将

$emit event

返回到父组件，然后更新父组件中的

数据

属性。这是因为您不应该直接修改

道具

---

示例：

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
  })
}

在子组件中：

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>

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
  })
}

然后在父组件中：

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>

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
  })
}

---

注意：

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
  })
}

如果这样做，您应该能够直接使用

道具

，因此无需在子组件中设置额外的

数据

属性-

userList:this.userList2

在这种情况下，您将通过

userList2

进行循环-与您现在所做的相同-

v-for=“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一起使用完整示例：

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
  })
}

在您的后端（Node.js）：

从组件发送更新：

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>

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
  })
}

正在侦听组件中的套接字：

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>

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
  })
}

---

socket.on（'update'

不是您认为的那样（它不是vue组件），因此分配给

this.userList

不会触发vue组件中的任何更改）

使用and arrow函数作为回调函数，以便它使用周围的

this

（这是您的组件），如下所示：

---

阅读更多关于此的信息，以及为什么箭头函数在另一个SO问题中没有它们：

喜欢你的答案，但它仍然没有显示在页面上。如何使其呈现childNameComponent而不是页面？childNameComponent只是在父组件（即列表组件）中使用的组件名称的一个示例。在这种情况下，您的

道具是从哪里获得的？道具来自socket.io用户，听起来很奇怪。我不确定我是否正确理解了这个问题。我已经编辑了答案。你能试试吗？此外，如果有任何错误，请检查您的控制台。仍然不会显示任何内容，但它确实存在。我如何更新它？