Vuejs- stop clearing data properties after routing back to previous component
0
I'm implementing a simple subscription app.
1- At the first step of subscription i get phone and nick name :
template :
<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">
script :
data() {
return {
phone:''
};
},
2- next step is OTP (one time password) that user receive in SMS.
Here's the problem: when the user go back to modify his phone number in the previous component, the old phone number is removed and he must enter the phone number again.(BAD UX)
what should i do to stop clearing phone number after routing back to previous it's component?
vue.js vuejs2 frontend vue-component
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
add a comment |
0
I'm implementing a simple subscription app.
1- At the first step of subscription i get phone and nick name :
template :
<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">
script :
data() {
return {
phone:''
};
},
2- next step is OTP (one time password) that user receive in SMS.
Here's the problem: when the user go back to modify his phone number in the previous component, the old phone number is removed and he must enter the phone number again.(BAD UX)
what should i do to stop clearing phone number after routing back to previous it's component?
vue.js vuejs2 frontend vue-component
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap yourrouter-viewwithin akeep-aliveelement.
– Husam Ibrahim
Dec 31 '18 at 8:34
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14
add a comment |
0
0
0
I'm implementing a simple subscription app.
1- At the first step of subscription i get phone and nick name :
template :
<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">
script :
data() {
return {
phone:''
};
},
2- next step is OTP (one time password) that user receive in SMS.
Here's the problem: when the user go back to modify his phone number in the previous component, the old phone number is removed and he must enter the phone number again.(BAD UX)
what should i do to stop clearing phone number after routing back to previous it's component?
vue.js vuejs2 frontend vue-component
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
I'm implementing a simple subscription app.
1- At the first step of subscription i get phone and nick name :
template :
<input type="phone" v-model="phone" class="form-control" placeholder=" 09128684821">
script :
data() {
return {
phone:''
};
},
2- next step is OTP (one time password) that user receive in SMS.
Here's the problem: when the user go back to modify his phone number in the previous component, the old phone number is removed and he must enter the phone number again.(BAD UX)
what should i do to stop clearing phone number after routing back to previous it's component?
vue.js vuejs2 frontend vue-component
vue.js vuejs2 frontend vue-component
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
edited Dec 31 '18 at 10:12
KouchakYazdi
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
asked Dec 31 '18 at 8:25
KouchakYazdiKouchakYazdi
6551120
6551120
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap yourrouter-viewwithin akeep-aliveelement.
– Husam Ibrahim
Dec 31 '18 at 8:34
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14
add a comment |
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap yourrouter-viewwithin akeep-aliveelement.
– Husam Ibrahim
Dec 31 '18 at 8:34
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap your
router-view within a keep-alive element.– Husam Ibrahim
Dec 31 '18 at 8:34
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap your
router-view within a keep-alive element.– Husam Ibrahim
Dec 31 '18 at 8:34
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14
add a comment |
1 Answer
1
active
oldest
votes
0
You can make use of localStorage, sessionStorage, cookies, etc. to store the phone number.
Here's a jsFiddle demonstrating localStorage and 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>'
})
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53985208%2fvuejs-stop-clearing-data-properties-after-routing-back-to-previous-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You can make use of localStorage, sessionStorage, cookies, etc. to store the phone number.
Here's a jsFiddle demonstrating localStorage and 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>'
})
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
|
show 1 more comment
0
You can make use of localStorage, sessionStorage, cookies, etc. to store the phone number.
Here's a jsFiddle demonstrating localStorage and 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>'
})
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
|
show 1 more comment
0
0
0
You can make use of localStorage, sessionStorage, cookies, etc. to store the phone number.
Here's a jsFiddle demonstrating localStorage and 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>'
})
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
You can make use of localStorage, sessionStorage, cookies, etc. to store the phone number.
Here's a jsFiddle demonstrating localStorage and 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>'
})
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
edited Dec 31 '18 at 10:54
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
answered Dec 31 '18 at 8:56
DigitalDrifterDigitalDrifter
8,3582624
8,3582624
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
|
show 1 more comment
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
for the first time that user visit the page, this code return null, because localStorage has not set. i used local storage for setting but for getting the value i just used v-model and data property.
– KouchakYazdi
Dec 31 '18 at 10:19
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
That is the expected value for a user's first visit. As they enter their phone number it's stored and retrieved on subsequent visits.
– DigitalDrifter
Dec 31 '18 at 10:28
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
let me try ....
– KouchakYazdi
Dec 31 '18 at 10:32
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
i can't make phone a computed property because i'm using it in another computed property for validation.
– KouchakYazdi
Dec 31 '18 at 10:43
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
I updated both the answer and the jsfiddle example. It uses a watcher now: jsfiddle.net/digitaldrifter/3m9yr470
– DigitalDrifter
Dec 31 '18 at 10:55
|
show 1 more comment
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53985208%2fvuejs-stop-clearing-data-properties-after-routing-back-to-previous-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You could use Vuex to store your state and check if a phone number exists when the component is loaded. Another option would be to wrap your
router-viewwithin akeep-aliveelement.– Husam Ibrahim
Dec 31 '18 at 8:34
cant we solve it without Vuex ? ex: using a watcher on phone property
– KouchakYazdi
Dec 31 '18 at 10:14