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>

Answer 1

那里不需要计算属性。您可以简单地使用 {{logs.length}} in 而不是 total

这是一个示例 fiddle

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