在 Vue 中的页面刷新时保留填充的表单字段

Question

我在这里面临的问题是，我无法弄清楚如何在页面刷新时保留表单中的值。每次我刷新页面时，表单中的所有填充值都消失了。

帮我解决这个问题。我正在考虑使用 localStorage，但不确定如何实现它。

   <template>
     <v-card class="mb-12">
       <v-form :model='user' class="content-padding" ref='pdfInputs'>
            <div class="section-header">
              User
            </div>
            <v-container fluid>
             <ul>
              <li v-for="(input, index) in user.inputs">
               <input type="text" v-model="input.one"> - {{ input.one }}  
               <input type="text" v-model="input.two"> - {{ input.two }}
               <button type="button" @click="deleteRow(index)">Delete</button>
              </li>
             </ul>   
            </v-container>
       </v-form>
     </v-card>
   </template>  


<script>
 export default {
  data () {
    return {
     user: {
      inputs: []
     }
    }
  }
  methods: {
    addRow() {
      this.user.inputs.push({
        one: '',
        two: ''
      })
    },
    deleteRow(index) {
      this.user.inputs.splice(index,1)
    }
  }
 }
</script>

Answer 1

vue中有watch功能

export default {
  data () {
    return {
     user: {
      inputs: []
     }
    }
  },
  mounted() {
    this.user.inputs = JSON.parse(localStorage.getItem('form')) || [];
  },
  watch: {
        user: {
            handler: function() {
                localStorage.setItem('form', JSON.stringify(this.user.inputs));
            },
            deep: true
        }
    },
  methods: {
    addRow() {
      this.user.inputs.push({
        one: '',
        two: ''
      })
    },
    deleteRow(index) {
      this.user.inputs.splice(index,1)
    }
  }
 }