在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填充商店。