question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

VueJS: Imagepicker: Duplicate value prop in imagepicker.vue's generated render function

See original GitHub issue

BUG: Refactoring of several question types occurred between R1.8.79 and R1.9.0, including modifications to the Image Picker question. One of these changes has caused the render function for the image picker to contain a duplicate “value” property which yields errors in certain browsers.

What is the current behavior?

When using survey-vue library in an application and loading that application in IE11 you will receive a: “Multiple definitions of a property not allowed in strict mode” in the console.

Tracked this down to the following line in survey-vue.js: domProps: { value: item.value, value: _vm.question.value },

this appears on line 13038 in R1.9.0 and 13168 in R1.9.5

Seems likely that this was related to the image-picker refactoring here

What is the expected behavior?

Non-duplicate value prop in domProps / no IE11 console errors

  • browser: IE11
  • browser version: 1809
  • surveyjs platform: vue
  • surveyjs version: 1.9.0+

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
tsv2013commented, Jan 21, 2022

Yes, I see. The issue is related to inputType branching logic in VueJS implementation. The thing is that imagepicker question returns inputType checkbox or radio only and even shouldn’t go in the third branch with domProps: { value: item.value, value: _vm.question.value },

We’ll discuss this issue and update this thread

0reactions
a-d-ccommented, Jan 21, 2022

No - you don’t even need to be in the image picker sample. Opening ANY of the samples in IE11 will cause the issue since the problem is in the generated code of the npm package itself.

Here is another example - if you navigate to this sample for the basic “Text” question via IE11 you will see the same errors: https://surveyjs.io/Examples/Library?id=questiontype-text&platform=Vue&theme=modern Screen Shot 2022-01-21 at 9 14 07 AM

Read more comments on GitHub >

github_iconTop Results From Across the Web

Render Functions & JSX
If the props option is not specified, then the props object passed to the function will contain all attributes, the same as attrs...
Read more >
Vue render function - non-scoped slot
If you work with render functions, it is now recommended to always access slots via $scopedSlots , whether they currently use a scope...
Read more >
Vue Render Functions: What (and How) to Use Them
Each Vue component implements a render function. Most of the time, the function will be created by the Vue compiler. When you specify...
Read more >
Introduction to Vue.js Render Functions | by John Au-Yeung
The code above works by passing in the size value to the variable-heading component as a prop and then the v-if in component...
Read more >
Rendering a list of Vue components - Learn web development
When you look at your rendered site, it should look the same, but our refactor now means that our id is being taken...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found