Skip to content

horizontal-tab in attribute argument causes 'Error compiling template' in Internet Explorer and Edge #6916

Closed
@PhKi

Description

@PhKi

Version

2.5.2

Reproduction link

https://jsfiddle.net/50wL7mdz/71870/

Steps to reproduce

this is the html that does not work:

<div id="app">
  <div v-bind:class="true
  &#09;? 'a'
  : ''
  "></div>
</div>

this is the html that does work:

<div id="app">
  <div v-bind:class="true
  ? 'a'
  : ''
  "></div>
</div>

this is the JavaScript:

new Vue({
  el: '#app'
})

What is expected?

Vue should be able to compile the template no matter if a horizontal-tab is in the attribute or not

What is actually happening?

vue fails to compile template:

[Vue warn]: Error compiling template:

<div id="app">
  <div v-bind:class="true&#10;  &#9;? 'a'&#10;  : ''&#10;  "></div>
</div>

- invalid expression: Invalid character in

    true
  &#9;? 'a'
  : ''
  

  Raw expression: v-bind:class="true
  &#9;? 'a'
  : ''
  "



(found in <Root>)
vue.js (577,7)

This happens in Internet Explorer and Edge.

It works in Chrome and Firefox.

Its related to this Bug:

:style with multiline attribute removes root element in all versions of IE #3663

which has been fixed in:

handle multiline atribute value parsing in IE (fix #3663)

As seen in the error message it doesnt complain when there are &#10; in the template, but does on &#09;.

I ran into this bug because i write long attributes in multiple lines and use horizontal-tabs to indent these lines so its easier to read.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions