动态显示数组长度答案

【问题标题】：Display array length dynamically动态显示数组长度
【发布时间】：2019-06-15 16:51:10
【问题描述】：

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

【解决方案1】：

你只需要使用Computed Property:

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

【讨论】：

@AbdullaThanseeh 很高兴它有帮助。不要忘记接受我的回答:)
我一定会这样做

【解决方案2】：

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

这是一个小提琴样本

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

【讨论】：