Skip to content

Issue with dynamic input[:type] bindings in Internet Explorer #10945

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rs3d opened this issue Dec 20, 2019 · 2 comments
Closed

Issue with dynamic input[:type] bindings in Internet Explorer #10945

rs3d opened this issue Dec 20, 2019 · 2 comments

Comments

@rs3d
Copy link

rs3d commented Dec 20, 2019 •
edited
Loading

Version

2.6.10

Reproduction link

https://codesandbox.io/s/serene-flower-nwgc5

Steps to reproduce

I'm trying to create a simple <input>-element component, which has dynamic type bindings
like <input[:type="text|number|tel|email|radio|checkbox"]>.

The following template-example-code is working as intended in all browsers,
but IE is throwing an error, when this code is used:

data.checkbox = []

<template>
  <div>
    {{ checkbox }}
    <div v-for="(field, index) in [{ type: 'checkbox', value: 'TEST '}]" :key="index">
      <input :type="field.type" :value="field.value" v-model="checkbox">
      {{ field }}
    </div>
  </div>
</template>

What is expected?

Normal type-binding like the input[radio] :value-binding example in the docs:
https://vuejs.org/v2/guide/forms.html#Radio-1

What is actually happening?

IE11 error message:

Multiple definitions of a property not allowed in strict mode

Even if I'm using :type="'checkbox'" to bind it directly to a string, it's not working in IE.

So currently I need to use type="checkbox" with an v-if="type ==='checkbox'" condition as workaround.

Maybe I'm doing something wrong, but the doc example isn't mentioning this caveat.
@posva
Copy link
Member

posva commented Dec 20, 2019

I tested your sample on an index.html file (code sandbox doesn't run on IE) and the code works just fine til IE9. I imagine you have something else in your code creating the bug or there is a transpilation bug somewhere else that creates an extra property on an object (that's the only thing I can tell from the error message). Let me know if you find out more information that could help

this is the file I used to test:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>

    <div id="app">
      {{ checkbox }}
      <div
        v-for="(field, index) in [{ type: 'checkbox', value: 'TEST '}]"
        :key="index"
      >
        <input :type="field.type" :value="field.value" v-model="checkbox" />
        {{ field }}
      </div>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          checkbox: []
        }
      })
    </script>
  </body>
</html>

@posva posva closed this as completed Dec 20, 2019
@rs3d rs3d mentioned this issue Dec 23, 2019
Closed
@rs3d
Copy link
Author

rs3d commented Dec 23, 2019

Hi, and first of all thank you for the help and really fast response.
I've tried your code example and indeed it's working in IE, so I assume it's related to vuecli.
Sorry for that, I should have tested it in a more basic setup.

(New cli-issue vuejs/vue-cli#4989 IE9 works, only IE10/11 is effected)

I wish you great holidays, R

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@posva @rs3d