Vuejs - прекратить очистку свойств данных после возврата к предыдущему компоненту - PullRequest
Новая
       23

Vuejs - прекратить очистку свойств данных после возврата к предыдущему компоненту

0 голосов
/ 31 декабря 2018

Я реализую простое приложение для подписки.

1- На первом этапе подписки я получаю телефон и псевдоним:

шаблон: 

<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">

скрипт: 

data() {
  return {
    phone:''
  };
},

2 - следующий шаг - это OTP (одноразовый пароль), который пользователь получает в SMS.

Вот проблема : когда пользователь возвращается кизмените свой номер телефона в предыдущем компоненте, старый номер телефона будет удален, и он должен будет снова ввести номер телефона. ( BAD UX )

что я должен сделать, чтобы прекратить очистку номера телефона послевернуться к предыдущему компоненту?

1 Ответ

0 голосов
/ 31 декабря 2018

Вы можете использовать localStorage , sessionStorage , файлы cookie и т. Д. Для хранения номера телефона.

Вот jsFiddle , демонстрирующий localStorage и vue router. 

Vue.use(VueRouter)

Vue.component('phone-number', {
  template: `<div>
  <label>Phone Number</label>
  <input v-model="phoneNumber">
  <router-link to="/otp">Next</router-link>
  </div>`,
  data: () => ({ phoneNumber: null }),
  watch: {
    phoneNumber: {
      handler: function (value) {
        localStorage.setItem('phone-number', value)
      }
    }
  },
  mounted () {
    this.phoneNumber = localStorage.getItem('phone-number')
  }
})

Vue.component('one-time-password', {
  template: `<div>
  <label>One Time Password</label>
  <input v-model="otp">
  <router-link to="/">Back</router-link>
  </div>`,
  data: () => ({ otp: null })
})

const router = new VueRouter({
  routes: [
    {
      component: {
        template: '<phone-number/>'
      },
      path: '/'
    },
    {
      component: {
        template: '<one-time-password/>'
      },
      path: '/otp'
    }
  ]
})

new Vue({
  el: '#app',
  router,
  template: '<router-view></router-view>'
})
...