Electron Survey-Vue: Unable to click Next or Complete Button

Are you requesting a feature, reporting a bug or asking a question?

Reporting a Bug

What is the current behavior?

I am testing SurveyJS-Vue with Electron framework. While the Survey is rendered correctly, I am not able to get any response from “Next” or “Complete” button. I am not getting any error message also.

What is the expected behavior?

On Clicking Next button, next page should be rendered and on Clicking ‘Complete’ button “Thank you for completing the survey!” message should be displayed.

How would you reproduce the current behavior (if this is a bug)?

npm install -g vue-cli vue init simulatedgreg/electron-vue test-project

In test-project : npm install survey-vue

Create Survey in the Project.

Provide the test code and the tested page URL (if applicable)

test.vue

---

<template> <b-container> <Survey :survey="survey"></Survey> </b-container> </template> <script> import * as SurveyVue from "survey-vue"; import "bootstrap/dist/css/bootstrap.css"; var Survey = SurveyVue.Survey; Survey.cssType = "bootstrap"; export default { components: { Survey }, data() { var surveyJSON = { title: "Tell us, what technologies do you use?", pages: [ { name: "page1", questions: [ { type: "radiogroup", choices: ["Yes", "No"], isRequired: true, name: "frameworkUsing", title: "Do you use any front-end framework like Bootstrap?" }, { type: "checkbox", choices: ["Bootstrap", "Foundation"], hasOther: true, isRequired: true, name: "framework", title: "What front-end framework do you use?", visibleIf: "{frameworkUsing} = 'Yes'" } ] }, { name: "page2", questions: [ { type: "radiogroup", choices: ["Yes", "No"], isRequired: true, name: "mvvmUsing", title: "Do you use any MVVM framework?" }, { type: "checkbox", choices: ["AngularJS", "KnockoutJS", "React"], hasOther: true, isRequired: true, name: "mvvm", title: "What MVVM framework do you use?", visibleIf: "{mvvmUsing} = 'Yes'" } ] }, { name: "page3", questions: [ { type: "comment", name: "about", title: "Please tell us about your main requirements for Survey library" } ] } ] }; var model = new SurveyVue.SurveyModel(surveyJSON); model.css = SurveyVue.surveyCss.getCss(); model.onComplete.add(function(result) {}.bind(this)); return { survey: model }; } }; </script> <style> </style>

---

your_code_here

Specify your

• browser: Electron (Chrome browser)
• browser version: “vue-electron”: “^1.0.6”,
• surveyjs platform (angular or react or jquery or knockout or vue): Vue
• surveyjs version: “survey-vue”: “^1.0.28”
• Vue.js: 2.5.16
• Electron: 1.8.7
• Node: 8.2.1

[pixelated-au]

I’d like to mention, I had a similar problem; the effect was the same but I don’t think the cause was the same but my resolution may provide a clue?

I was declaring my SurveyModel in the computed: {} section of my Vue component. This caused all events to fail silently. The next button (on multi-page forms), ‘other’ checkbox, validataion, etc just were unresponsive (unless I manually used event handlers).

I moved the SurveyModel to the data: () => ({}) section and used a watch: {} to update the SurveyModel, the system became responsive.

[jonathanmarvens]

I’d like to mention, I had a similar problem; the effect was the same but I don’t think the cause was the same but my resolution may provide a clue?

I was declaring my SurveyModel in the computed: {} section of my Vue component. This caused all events to fail silently. The next button (on multi-page forms), ‘other’ checkbox, validataion, etc just were unresponsive (unless I manually used event handlers).

I moved the SurveyModel to the data: () => ({}) section and used a watch: {} to update the SurveyModel, the system became responsive.

This issue just wasted a couple hours of my time scratching my head and debugging. I’m glad that I ran into this reply here from @pixelated-au to make me realize that the computed property was the issue. No errors were thrown and debugging showed normal operation. I really hope this is fixed soon.