Я нашел пример проекта vue js из здесь А теперь я хочу запустить этот код в одном html-файле, используя vue js.
Я попытался:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/conversational-form@1.0.1/dist/conversational-form.min.js" crossorigin></script>
<script 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 = ConversationalForm.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>
</html>
Но это не работа. Где у меня есть какие-либо ошибки? Спасибо!
Веб-сайт с документацией по проекту: https://space10 -community.github.io / диалоговая форма / docs / 1.0.0 / начало работы /