Сохраните заполненные поля формы на странице refre sh in Vue

Question

Проблема, с которой я здесь сталкиваюсь, заключается в том, что я не могу понять, как мне сохранить значения в форме на странице refre sh. Каждый раз, когда я обновляю sh страницу, все заполненные значения в форме исчезают.

Помогите мне решить эту проблему. Я думал об использовании 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

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