在 vue 中重新加载/刷新时保留表单中的填充字段

Question

I want to add the feature that the filled form field values are retained in the form on page reload. Is there a way to to this. Will vm.$forceUpdate() solve this issue? Please help me solve this issue

   <template>
     <v-card class="mb-12">
       <v-form :model='user' class="content-padding" ref='pdfInputs'>
            <div class="section-header">
              User
            </div>
            <v-container fluid>
              <v-layout row wrap>
                <v-flex xs12 md6 class="add-col-padding-right info-align">
                  <v-text-field required
                    label='User Full Name​'
                    v-model='user.user_full_name'>
                  </v-text-field>
                </v-flex>
                <v-flex xs12 md6 class="add-col-padding-left info-align">
                  <v-text-field
                    label='Street Address'
                    v-model='user.user_address'
                    required>
                  </v-text-field>
                </v-flex>
              </v-layout>
            </v-form>
         </v-card>
     </template>  


<script>

export default {
  data () {
    return {
      user: {
        user_full_name: '',
        user_address: []
      }
    }
  }
}
</script>

Answer 1

You can use localStorage or indexedDB for persistent storage.

You should either watch for changes on user or stop using v-model and use v-bind and v-on:change to be able to catch changes to your models and save them.

Then on mounted or other lifecycle methods you need to read from your persistent medium and populate user .

Going forward, if you encounter this need more and more, you could use vuex to store your data and use the mutations to save to persistent medium. You should also populate the store at startup from localStorage/indexedDB.