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

Question

我想添加在页面重新加载时将填充的表单字段值保留在表单中的功能。有没有办法解决这个问题。 vm.$forceUpdate() 会解决这个问题吗？请帮我解决这个问题

   <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

您可以使用localStorage 或indexedDB 进行持久存储。

您应该watch 对user 进行更改或停止使用v-model 并使用v-bind 和v-on:change 以便能够捕获对模型的更改并保存它们。

然后在 mounted 或其他生命周期方法上，您需要从持久性介质中读取并填充 user。

今后，如果您越来越多地遇到这种需求，您可以使用vuex 来存储您的数据并使用mutations 来保存到持久性介质。您还应该在启动时从 localStorage/indexedDB 填充存储。