Отображать длину массива динамически

Question

Я пытаюсь отобразить сообщения веб-сокета, полученные с индексом и общим числом.Как я могу отображать общее количество динамически?

<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}} вместо вместо

вот образец скрипки

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

Answer 2

Вы просто должны использовать Вычисленное свойство :

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