I'm having trouble making a Vue app where I'm trying to use SurveyJS functions:
- I have one .vue page(Questionnaire.vue) where I have a survey function asking Pre-Assessment questions. On completions I want it to save to a JSON file.
- I have another .vue page(contactInfo.vue) where I have a survey function where s user can input their contact info (First Name, Last Name, Phone Number, and Email. At the end of the page I would like for it to have the ability to upload files and I have a method implementing that. Do I need a better Axios?
What my problem is I'm:
- Having trouble on completing the first Survey(Questionnaire) letting the Vue app transition into the second .vue page (ContactInfo). Should it be in one vue page or am I implementing and calling it wrong?
- I'm having trouble POST-ing to my MongoDB database. I want to have the ability to send all the information in a JSON file to the database, but I'm having trouble with connection or something.
The sample code will not include my database URL connection but the code is showing everything else.
PreScreen.vue
JavaScript<template>
<survey :survey="survey"/>
</template>
<script>
import * as Survey from "survey-vue";
import "survey-vue/survey.css";
import "./index.css";
Survey.StylesManager.applyTheme("default");
export default {
name: 'PreScreen',
data() {
var json = {
showQuestionNumbers: "off",
pages: [
{
questions: [
{
type: "radiogroup",
name: "q1",
title: "Do you know the safety specs of commercial buildings code?",
isRequired: true,
choices: [
"Yes", "No"
],
colCount: 0
}, {
type: "radiogroup",
name: "q2",
title: "Question 2",
visibleIf: "{q1}='Yes'",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q3",
title: "Question 3:",
visibleIf: "{q1}='Yes' and {q2} ='Yes'",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q4",
title: "Question 4:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
}, {
}, {
type: "radiogroup",
name: "q5",
title: "Question 5:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
}, {
type: "radiogroup",
name: "q6",
title: "Question 6:",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No']",
isRequired: true,
choices: ["Yes", "No"]
},
],
}
]
};
const survey = new Survey.Model(json);
function sendDataToServer(sender) {
var resultAsString = JSON.stringify(sender.data);
alert(resultAsString);
}
survey
.onComplete.add(sendDataToServer);
return {survey: survey};
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
And this is my Upload.vue
JavaScript<template>
<survey :survey="survey"/>
</template>
<script>
import * as Survey from "survey-vue";
import "survey-vue/survey.css";
import "./index.css";
Survey.StylesManager.applyTheme("default");
export default {
name: 'Upload',
data() {
Survey.StylesManager.applyTheme("modern");
var json = {
questions: [
{
type: "file",
title: "Please upload your files",
name: "files",
storeDataAsText: false,
allowMultiple: true,
maxSize: 102400
},{
name: "first_Name",
type: "text",
title: "Please enter your First Name:",
placeHolder: "Jon",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
name: "last_Name",
type: "text",
title: "Please enter your Last Name:",
placeHolder: "Snow",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
name: "email",
type: "text",
title: "Please enter your Email:",
placeHolder: "jonsnow@gmail.com",
inputMask: "email",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']",
isRequired: true,
autoComplete: "name"
},
{
type: "file",
title: "Please upload your files",
name: "files",
visibleIf: "{q1}='Yes' and {q2}='Yes' and {q3} anyof ['Yes', 'No'] and {q4} anyof ['Yes', 'No'] and {q5} anyof ['Yes', 'No'] and {q6} anyof ['Yes', 'No']" ,
storeDataAsText: false,
allowMultiple: true,
maxSize: 902400
}
]
};
const survey = new Survey.Model(json);
survey.onComplete.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
survey.onClearFiles.add(function (survey, options) {
// Code to remove files stored on your service
// SurveyJS Service doesn't allow to remove files
options.callback("success");
});
survey
.onUploadFiles
.add((survey, options) => {
var formData = new FormData();
options
.files
.forEach(function (file) {
formData.append(file.name, file);
});
var xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open("POST", "mongodb+srv://''CONNECTION_WAS_HERE''");
xhr.onload = function () {
var data = xhr.response;
options.callback("success", options.files.map(file => {
return {
file: file,
content: data[file.name]
};
}));
};
xhr.send(formData);
});
survey
.onDownloadFile
.add((survey, options) => {
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.open("GET", "mongodb+srv://'CONNECTION_WAS_HERE'" + options.content);
xhr.onload = function () {
var reader = new FileReader();
reader.onload = function (e) {
options.callback("success", e.target.result);
};
reader.readAsDataURL(new File([xhr.response], options.fileValue.name, {type: options.fileValue.type}));
};
xhr.send();
});
}}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
And this is my App.vue
JavaScript<template>
<div id="app">
<Home/>
<div id="surveyElement">
<PreScreen/>
<Upload></Upload>
</div>
</div>
</template>
<script>
import Home from './components/Home.vue'
import PreScreen from './components/PreScreen.vue'
import Upload from './components/Upload.vue'
export default {
name: 'App',
components: {
Home,
PreScreen,
Upload
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>