Computer scienceFrontendVue.jsComputable Properties

Getters and setters

Theory

Dependent setter

Report a typo

The below Vue component is created with a reactive property total and a computed getter halfTotal that calculates half of the total. Include a button that, when clicked, sets the halfTotal property to 10. Complete the code such that it works as it is mentioned.

Fill in the gaps with the relevant elements
<template>
  <div>
    <p>Total: {{ total }}</p>
    <p>Half Total: {{ halfTotal }}</p>
    <button @click="setHalfTotal">Set Half Total to 10</button>
  </div>
</template>

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

const total = ref(50)

const halfTotal = computed({
  : () => total.value / 2,
  : (value) => {
    total.value = value * 2
  }
})

const setHalfTotal = () => {
  halfTotal.value = 10
}
</script>
settergettergetcomputedsetcomputerefrefer

Create a free account to access the full topic