vue.js - 动态显示数组长度

Question

我正在尝试显示收到的带有索引和总数的 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>

标签： vue.jswebsocket

Answer 1

你只需要使用计算属性：

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