Question

我正在实现一个简单的订阅应用程序。

1-订阅的第一步，我会得到电话和昵称：

模板：

management.endpoints.web.exposure.include=*
management.endpoints.web.base-path=/

脚本：

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

2-下一步是用户通过短信接收的OTP（一次性密码）。

这是问题所在：当用户回去修改前一个组件中的电话号码时，旧电话号码将被删除，并且他必须再次输入电话号码。（ BAD UX ）

路由回先前的电话号码组件后，我该怎么做才能停止清除电话号码？

Answer 1

您可以使用localStorage，sessionStorage，Cookie等来存储电话号码。

这是jsFiddle，展示了localStorage和vue路由器。

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

VueJS-路由回上一组件后停止清除数据属性

1 个答案: