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

[kmshelke]

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

---

---

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

[tsv2013]

It looks like we have the issue similar the https://stackoverflow.com/questions/49585845/attrs-is-readonly-listeners-is-readonly-avoid-mutating-a-prop-directly

SurveyJS libary uses main file of the VueJS package in spite of electron generated template uses esm module as alias:

    alias: {
      '@': path.join(__dirname, '../src/renderer'),
      'vue$': 'vue/dist/vue.esm.js'
    },

[kmshelke]

Thanks for reply, but I am not able arrive at a solution.

What exact changes I need to make and in which file.

Thanks,
kmshelke

[tsv2013]

@kmshelke We have not find a solution. We still working on the issue.

[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.

[kmshelke]

I have changed my approach of creating Electon-Vue application. I followed this link
[https://scotch.io/tutorials/create-a-desktop-quiz-application-using-vue-js-and-electron] to create the structure and then used Survey-Vue. and now it is working.

It seems problem with @vue/cli because Survey-vue is not functioning in Vue applications created by @vue/cli

Hope it helps you to look into the issue.

[tsv2013]

@kmshelke Thank you for your help. I'm glad to hear you solved your problem. I'm thinking the problem still existing in compatibility of ES2016 modules of VueJS build and UMD modules of SurveyJS. We are working on it. I'm duplicating this issue on the https://github.com/surveyjs/surveyjs/issues/1223 - Surveyjs-vue not working with last vue cli

[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.