I have a Vue 2 app and it's using the composition API package so that I can create vue components with composition API.
How does one create and use a setter for a computed property with the Vue composition API?
I am looking at the docs, and I do not see any documentation for creating a setter for a computed property. In the test suite, I see an example:
const b = computed({
get: () => a.value + 1,
set: (v) => (a.value = v - 1),
})
However I am not too sure how to access the set method on b. Does anyone know how to create a computed property with a set method for the composition API? And how can I use the set method so I can change the computed property's value?
In a vue3 component, you would use it like this:
<template>
<p>a={{ a }} b={{ b }}</p>
<button @click="b = 3">Click me</button>
</template>
<script setup>
import {computed, ref} from 'vue';
const a = ref(1);
const b = computed({
get: () => a.value + 1,
set: (v) => (a.value = v - 1),
})
</script>
The setter for b is called when clicking the button (assignment b = 3)
An alternative is to use computed section inside the <script> tag (without the <script setup> section):
<template>
<p>a={{a}} b={{b}}</p>
<button @click="b = 3">Click me 1</button>
</template>
<script>
export default {
name: "Test",
data(){
return {
a: 1
}
},
computed: {
b:{
get(){return this.a + 1;},
set(v){this.a = v - 1;}
}
}
}
</script>