Within my Vue component example (utilizing Vue 2 and Vuetify 1), I have implemented an input field for user data entry. However, I am looking to programmatically alter the input field's data to a specific value.
For instance, in this scenario, I aim to enforce the input field to always display "1" regardless of the user's input (admittedly serving no practical purpose aside from illustrating a more intricate issue).
Here is a simplified representation:
<script>
export default
{
data() { return { v: null } },
computed:
{
c:
{
get() { return this.v; },
set(v) { this.v = "1"; }
}
}
};
</script>
<template>
<v-text-field v-model = "c" />
</template>
Regrettably, this specific approach does not produce the desired result. Any user input retained within the text field remains as is, even though triggering the setter method results in changing the value of property v. The displayed value on screen, however, fails to update accordingly.
The ultimate question then becomes - what could be the underlying issue here?
NOTE:
I've researched alternative solutions involving the utilization of the set method to manipulate the v-model value. Despite attempting various approaches such as implementing return { o: { v: null }} within the data section alongside employing
set(v) { this.$set(this.o, "v", "1"); }computed section, unfortunately, these adjustments failed to resolve the persistent problem in my circumstance.