Vuetify Text Field : Changes To Values Don't Persist (Lost on Blur or Focus)
Found the solution at this link! $forceUpdate() is what was needed. Updated via v-model :
<div v-show="false" :id="`wordLine_`+(n-1)" :data-numWords="wordLines[n-1].length" class="wordLine" style="display:flex; justify-content:center; margin:0 0 25px;"> <div v-for="(wordSize, key2) in wordLines[n-1]"> <div class="wordBox" style="display:flex; color:#f00;"> <v-text-field v-model="wordInputs[n-1][key2]" required class="wordInput" data-isWordInput="1" :stepperStep="n" :rel="key2" :rules="requiredRule" outline single-line dense height="36" @click:clear="wordInputCleared(n-1, key2)" :size="wordSize" :maxlength="wordSize"></v-text-field> <div v-show="false" class="wordInputSizeRemaining" style="margin:4px 0px 0px 6px;">{{wordSize}}</div> </div> </div> </div>
And :
} else { // insert keyVal at cursor let lastCharRemoved = $(this).val().slice(0, -1); _this.wordInputs[$(this).attr('stepperstep')-1][$(this).attr('rel')] = lastCharRemoved.slice(0, $(this)[0].selectionEnd) + keyVal + lastCharRemoved.slice($(this)[0].selectionEnd); _this.$forceUpdate(); }