I discovered a Vue.js sample project on this website and now I want to execute this code in a single HTML file using Vue.js.
I attempted:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</tite>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30535f5e465542435144595f5e515c1d565f425d70011e001e01">[email protected]</a>/dist/converastional-form.min.js" crossorigin></script>
<scrpit src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<MyForm></MyForm>
</div>
<script>
Vue.component('MyForm', {
template: '<div class="myForm"></div>',
styles: [`
.myForm {
position: relative;
height: 100%;
width: 100%;
}
`],
methods: {
setupForm: function () {
const formFields = [
{
'tag': 'input',
'type': 'text',
'name': 'firstname',
'cf-questions': 'What is your firstname?'
},
{
'tag': 'input',
'type': 'text',
'name': 'lastname',
'cf-questions': 'What is your lastname?'
}
];
this.cf = ConversatonalForm.startTheConversation({
options: {
submitCallback: this.submitCallback,
preventAutoFocus: true,
},
tags: formFields
});
this.$el.appendChild(this.cf.el);
},
submitCallback: function () {
var formDataSerialized = this.cf.getFormData(true);
console.log("Formdata, obj:", formDataSerialized);
this.cf.addRobotChatResponse("You are done. Check the dev console for form data output.")
}
},
mounted: function () {
this.setupForm()
},
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</htl>
However, it seems to not be working. Can someone help me identify any errors? Thank you!
For more information, visit the project documentation site: