Vuetify Text Field : Changes To Values Don't Persist (Lost on Blur or Focus) Vuetify Text Field : Changes To Values Don't Persist (Lost on Blur or Focus) vue.js vue.js

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();                    }