Question

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

这是我的代码

<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引导程序组项目自动更新？

Answer 1

概述：

您可以$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结合使用完整示例：

在您的后端（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
  })
}

Answer 2

这很难说，因为我们无法运行您的代码，但快速浏览一下，我认为它是如此简单：

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

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

Answer 3

this回调中的socket.on('update'不是您想的那样（它不是vue组件），因此分配给this.userList不会触发Vue组件）。

使用和箭头函数作为回调，以便它使用周围的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问题中没有它们：How does the "this" keyword work?

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

3 个答案: