I have a ref:
const day = ref(null);
I have an input:
<input v-model="day" class="border p-2" @blur="pad(day)" />
I have a pad method:
const pad = (day) => {
//day is the value (e.g. 7) and not a reference to the ref
....
Inside pad i want to pass the day ref and modify it like day.value = '2312' but the value is already unwrapped.
Any way to prevent this?
I have tried:
<input v-model="day" class="border p-2" @blur="pad(ref(day))" />
But this creates a new ref and does not reference the original value.
1
Yes, this is a problem of no way to pass a top level unwrapped ref, but you can use the ref directly:
Playground
<script setup>
import { ref } from 'vue'
const day = ref('')
function pad(){
day.value = day.value.padStart(2, '0');
}
</script>
<template>
<h1>{{ day }}</h1>
<input v-model="day" @blur="pad" />
</template>
Btw, the unwrapped ref does work also, but the first example is more clear/semantic since the extra ref passing logic is removed.
<script setup>
import { ref } from 'vue'
const day = ref('')
function pad(val){
day.value = val.padStart(2, '0');
}
</script>
<template>
<h1>{{ day }}</h1>
<input v-model="day" @blur="pad(day)" />
</template>