One of my tasks involves tracking the last selected input in order to append a specific string or variable to it later on.
created: function () {
document.addEventListener('focusin', this.focusChanged);
}
focusChanged(event) {
if (event.target.id !== 'variable-search') {
this.lastElement = event.target;
}
}
Everything seems to be functioning properly, as clicking on an input field updates this.lastElement with the focused element. All these input fields have a v-model, which can either be a string within an object or simply a standalone string.
The issue arises when I attempt to update the value using:
this.lastElement.value += variable;
Vue fails to detect these changes, and even in the Vue Developer tools, the string does not get updated. However, the input field itself displays the updated value. It appears to be some sort of reactivity problem.
Interestingly, adding a new character into the v-model field triggers the update. So, the problem only occurs when I update the string using this.lastElement.
Since the input fields are dynamic and their number is unknown, I am unsure how many fields there are or how many lists exist. Therefore, I need Vue to re-render the variable once the value of lastElement has been updated.
Edit
I attempted using @focus as shown in this example:
<input v-model="testVar" @focus="lastElement = testVar">
If I later update lastElement, it does not reflect those changes in testVar, but only in lastElement.