Here is a directive I created to convert an input's v-model to uppercase:
app.directive('uppercase', (el) => {
el.value = el.value.toUpperCase()
})
However, after applying this directive, the resulting v-model displays the input value with the last character in lowercase.
<template>
<div>
<input type="text" v-uppercase v-model="testInput" />
<div>
{{ testInput }}
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const testInput = ref('')
</script>
I'm confused as to why this behavior is occurring. Can anyone help me understand?