Ref variable unlimited addition of value

Following code results in unlimited addition in total function value

<script setup>
import { ref } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])
let t=0;

function total(id){
t += id;

return t;
}
</script>

<template>
  <ul>
    <li v-for="item in list">
      {{ total(2) }}
    </li>
  </ul>
</template>

https://streamable.com/0o33en

RandiMa

2 years ago

Level 1

Try this.

<script setup>
import { ref, computed } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])

const total = computed(() => {
  return list.value.reduce((acc, item) => acc + item, 0)
})
</script>

<template>
  <ul>
    <li v-for="item in list">
      {{ item }}
    </li>
    <p>Total: {{ total }}</p>
  </ul>
</template>

Please or to participate in this conversation.