-
|
Hi there, Just wondering if anyone could help me out in saving incomplete form data to local storage and pre-populating the form based on those local storage values (if they exist - otherwise populate answers as 'blank'). Any help would be appreciated! Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment · 11 replies
-
|
Hi, you could use the If you're setting the questions as components, simply set their v-model to whatever value you have saved in localStorage. Example: <template>
<flow-form
ref="flowform"
v-on:step="onStep"
v-bind:questions="questions"
/>
</template>
<script>
export default {
name: 'example',
components: {
FlowForm
},
data() {
questions: [
new QuestionModel({
id: 'first_name',
tagline: 'Hi! Welcome to our demo survey 😊',
title: 'What is your first name?',
type: QuestionType.Text,
required: true,
placeholder: 'Start typing here...',
answer: localStorage.getItem('first_name')
}),
...
},
onStep() {
localStorage.setItem('first_name', this.questions[0].answer)
},
...
}
</script> |
Beta Was this translation helpful? Give feedback.
-
|
The issues you're having were actually in Vue Flow Form and not in your implementation. I've now fixed these issues, it should work if you pull the new version from master, but we're also planning to push a new version to npm within a few days. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the update! Everything is being saved to localStorage and not populating up as 'null' anymore, which is great. There's still a slight problem: This also means that if someone was to go back over their answers, deselect one of the multiple selected answers, it would still populate. |
Beta Was this translation helpful? Give feedback.
-
|
No problem at all! The issue you reported has also been fixed with the latest commit. |
Beta Was this translation helpful? Give feedback.
-
|
Everything works! thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Just a quick update - there was another issue where the onAnswer(question) {
localStorage.setItem('question_' + question.id, JSON.stringify(question.answer))
} |
Beta Was this translation helpful? Give feedback.
Hi,
you could use the
onAnsweroronStepevents to catch when the user answers a question and then save your wholequestionsarray to localStorage (or only the answers so as to not use too much storage space), and then when constructing the array, set theanswerof theQuestionModelto your saved answer. This field is currently undocumented but I've opened issue #165 to make sure we document this in the future.If you're setting the questions as components, simply set their v-model to whatever value you have saved in localStorage.
Example: