代码之家 › 专栏 › 技术社区 › Abdulla Thanseeh

动态显示数组长度

websocket vue.js

Abdulla Thanseeh · 技术社区 · 6 年前

我正在尝试显示接收到的WebSocket消息的索引和总数。如何动态显示总计?

<template>
  <div>
    <v-btn @click="clickButton">Test Websocket</v-btn>
    <h1>Total webhooks : {{total}}</h1>
    <ul v-for="(log,index) in logs" :key=index >
      <li>{{index}} - {{ log }}</li>
    </ul>
  </div>
</template>

<script>
    export default {
      data () {
        return {
          logs: [],
          newlog: '',
          total:0
        }
      },
      methods: {
        clickButton: function () {
          this.$socket.send('Let me ask you a questin.can u hear me???')
        }
      },
      created () {
        this.$options.sockets.onmessage = (data) => {
          console.log(data)
          this.logs.push(data.data)
        }
      },
    }
</script>

2 回复 | 直到 6 年前

Shanavas M 6 年前

这里不需要计算属性。你可以简单地使用 {{logs.length}} 以代替总数

这是一把样品小提琴

https://jsfiddle.net/czgnv53q/3/

Styx 6 年前

你只要用 Computed Property :

export default {
  data() {
    return {
      logs: []
    };
  },
  computed: {
    total() {
      return this.logs.length;
    }
  },
  ...
}

推荐文章

young · 插座io错误格式错误的箭头函数参数列表[关闭]

2 年前

Taylor Johnson · c从套接字接收到无符号字符数组时的意外输出

2 年前

Moshe Shaham · 我应该使用现有的websocket连接进行请求/响应操作吗?

2 年前

Nikita Sivukhin · Kotlin ktor库不必等待websockets处理程序中的所有协同程序完成

2 年前

noobyy · 异步函数阻塞主线程

2 年前

June Leow · 跨选项卡使用Web套接字的实时通知栏

2 年前

Muposat · AIOHTTPS服务器不与套接字通信。io客户端,错误404

6 年前

garson · 打开Websocket(“消息”)不工作

6 年前

TomáÅ¡ Zato · 无法连接到套接字io服务器

6 年前

Tonys AnsonÄ« Misirgis · 当“网站”选项卡关闭时,服务器如何知道关闭websocket的连接

6 年前