Error when using v-for in IE10 #7946

parapada73 · 2018-04-02T11:40:10Z

Version

2.5.16 / 2.5.17

Reproduction link

https://jsfiddle.net/plasmaeng/ndmjjkho/1/

Steps to reproduce

Running the code below in IE10 will result in the following error:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="vue.js"></script>
</head>
<body>
<div id="app_test">
	<form>
	<select>
		<option v-for="value in L">{{value}}</option>
	</select>
	</form>
</div>

<script>
	var appTest = new Vue({
	el: '#app_test',
		data: {
			L : [ '1', '2' ,'3']
		}
	});
</script>
</body>
</html>

Here is the error message from IE10.

[Vue warn]: Error compiling template:

<div id="app_test">
	<form>
	<select>
		<option v-for="value in L">{{value}}</option>
	</select>
	</form>
</div>

invalid expression: Syntax error in  Raw expression: v-for="value in L"
invalid v-for alias "" in expression: v-for="value in L"

What is expected?

<option> is generated from 1 to 3.

What is actually happening?

<option> is not generated with error !!!

I have persuaded a senior for a long time to introduce Vue.js.
If this problem is solved, we plan to reorganize the site into Vue.js.
Please solve the problem.

The text was updated successfully, but these errors were encountered:

schoonc · 2018-04-02T16:31:21Z

Confirm.

I insert:
console.log(render)
before line:
vnode = render.call(vm._renderProxy, vm.$createElement);

Generated render function in chrome, for example:
with(this){return _c('div',{attrs:{"id":"app_test"}},[_c('form',[_c('select',_l((l),function(value){return _c('option',[_v(_s(value))])}))])])}

In ie 10:
with(this){return _c('div',{attrs:{"id":"app_test"}},[_c('form',[_c('select',[_c('option',[_v(_s(value))])],2)])])}

P.S. With vue 2.5.15 no problem.

schoonc · 2018-04-03T10:27:31Z

If in vue 2.5.16 revert this commit (71b4b25) then problem disappears.

linkser · 2018-04-03T13:50:39Z

IE9 also has this problem

LinusBorg · 2018-04-03T13:58:30Z

probably the changes to the regex don'T work in <IE11 ?

schoonc · 2018-04-03T14:07:36Z

Yes.

    console.clear()
    var forAliasRE = /([^]*?)\s+(?:in|of)\s+([^]*)/;
    console.log('value in list'.match(forAliasRE))

Output in chrome:

["value in list", "value", "list"]

Output in ie10:

[" in list", "", ""]

schoonc · 2018-04-03T14:33:59Z

http://sjhannah.com/blog/2011/05/17/javascript-matching-all-characters-including-new-line/

May be replace [^] on [\s\S] ?

maetteam · 2018-04-05T23:51:27Z

Hallo, yeah that should fix the problem.
'\s' <=IE8 doesn't include all white spaces, non-breaking space (\xA0) and thin space (\x2009) are not included, if you are planning to run it on IE8 and below ;).

LinusBorg · 2018-04-06T07:52:55Z

VUe doesn't support <IE9.

pbelyaev · 2018-04-18T04:28:50Z

Any updates?

Closes vuejs#7946

huanghui8030 · 2018-04-19T03:29:42Z

Update vue version to v2.5.16 or v2.5.15, but error reporting. Don't know why?

resolved, Thanks!
posva@405c815

weijuer · 2018-05-04T05:03:18Z

What can I do, if I need to use it in ie9+? Wait for next release version or change to 2.5.15?

LinusBorg · 2018-05-04T11:35:16Z

Right now, those are your two options, yes.

symmetriq · 2018-05-31T23:28:53Z

If you need one of the other fixes in 2.5.16, you can also just patch it yourself.

Search: /([^]*?)\s+(?:in|of)\s+([^]*)/
Replace: /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/

This worked for me, but I decided to revert to 2.5.15 anyway (don't need any of the other changes in 2.5.16).

ufozy · 2018-08-15T01:59:37Z

use “version 2.4.2” is ok

murilobd · 2018-09-17T11:15:43Z

I'm on version 2.5.7 and still getting this issue with damn IE

TheWebTech · 2018-09-25T14:56:27Z

to anyone still experiencing this issue. @symmetriq's tip #7946 (comment)

was spot on, reverting to 2.5.15 solves it. I'd assume he's also correct on the regex adjustment.

tfnigel · 2018-10-03T04:47:01Z

Using 2.5.15, fixed it for me; I was seeing the problem on 2.5.17 on IE9.

alanwei43 · 2018-10-16T09:50:45Z

[email protected] is ok

Closes #7946

mrquokka · 2018-11-15T10:38:23Z

[email protected] is ok

2.5.17 have some error on IE9
object is

  css_allowed_styles = {
    'default': '',
    'darkness': 'dark_theme.css'
```}
crashed template
` v-for="(file_name, item) in css_allowed_styles" :value="item" :key="item">`

qinshenxue · 2018-11-30T06:58:44Z

the problem disappears in [email protected] when using ie9

mrquokka · 2018-12-01T07:06:35Z

the problem disappears in [email protected] when using ie9

disagree, have some error on 2.5.17, and fix help me

posva · 2018-12-01T09:28:45Z

This will be released in the next version which is coming soon 🙂

Closes vuejs#7946

LinusBorg added the regression label Apr 3, 2018

posva added a commit to posva/vue that referenced this issue Apr 18, 2018

fix(for): use IE compatible regex in v-for regex

405c815

Closes vuejs#7946

posva mentioned this issue Apr 18, 2018

fix(for): use IE compatible regex in v-for regex #8048

Merged

13 tasks

posva mentioned this issue May 3, 2018

V-for does not working in IE10 @Version 2.5.16: ‘invalid v-for alias “” in expression: v-for=“banner in bannerList”’ #8122

Closed

Justineo mentioned this issue May 22, 2018

Error in render: "ReferenceError: "sp" undefined" #8228

Closed

haoqunjiang added the has PR label Jun 7, 2018

kyleoliveiro mentioned this issue Jun 20, 2018

v-for does not work in IE9 karol-f/vue-custom-element#129

Closed

yyx990803 closed this as completed in #8048 Oct 24, 2018

yyx990803 pushed a commit that referenced this issue Oct 24, 2018

fix(for): use IE compatible regex in v-for regex (#8048)

ecc239e

Closes #7946

vuejs locked as spam and limited conversation to collaborators Dec 1, 2018

f2009 pushed a commit to f2009/vue that referenced this issue Jan 25, 2019

fix(for): use IE compatible regex in v-for regex (vuejs#8048)

04ec833

Closes vuejs#7946

aJean pushed a commit to aJean/vue that referenced this issue Aug 19, 2020

fix(for): use IE compatible regex in v-for regex (vuejs#8048)

fec69fd

Closes vuejs#7946

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error when using v-for in IE10 #7946

Error when using v-for in IE10 #7946

parapada73 commented Apr 2, 2018 •

edited

Loading

schoonc commented Apr 2, 2018 •

edited

Loading

schoonc commented Apr 3, 2018

linkser commented Apr 3, 2018

LinusBorg commented Apr 3, 2018

schoonc commented Apr 3, 2018 •

edited

Loading

schoonc commented Apr 3, 2018

maetteam commented Apr 5, 2018

LinusBorg commented Apr 6, 2018

pbelyaev commented Apr 18, 2018

huanghui8030 commented Apr 19, 2018 •

edited

Loading

weijuer commented May 4, 2018

LinusBorg commented May 4, 2018

symmetriq commented May 31, 2018

ufozy commented Aug 15, 2018

murilobd commented Sep 17, 2018

TheWebTech commented Sep 25, 2018

tfnigel commented Oct 3, 2018 •

edited

Loading

alanwei43 commented Oct 16, 2018

mrquokka commented Nov 15, 2018

qinshenxue commented Nov 30, 2018

mrquokka commented Dec 1, 2018

posva commented Dec 1, 2018

Error when using v-for in IE10 #7946

Error when using v-for in IE10 #7946

Comments

parapada73 commented Apr 2, 2018 • edited Loading

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

schoonc commented Apr 2, 2018 • edited Loading

schoonc commented Apr 3, 2018

linkser commented Apr 3, 2018

LinusBorg commented Apr 3, 2018

schoonc commented Apr 3, 2018 • edited Loading

schoonc commented Apr 3, 2018

maetteam commented Apr 5, 2018

LinusBorg commented Apr 6, 2018

pbelyaev commented Apr 18, 2018

huanghui8030 commented Apr 19, 2018 • edited Loading

weijuer commented May 4, 2018

LinusBorg commented May 4, 2018

symmetriq commented May 31, 2018

ufozy commented Aug 15, 2018

murilobd commented Sep 17, 2018

TheWebTech commented Sep 25, 2018

tfnigel commented Oct 3, 2018 • edited Loading

alanwei43 commented Oct 16, 2018

mrquokka commented Nov 15, 2018

qinshenxue commented Nov 30, 2018

mrquokka commented Dec 1, 2018

posva commented Dec 1, 2018

parapada73 commented Apr 2, 2018 •

edited

Loading

schoonc commented Apr 2, 2018 •

edited

Loading

schoonc commented Apr 3, 2018 •

edited

Loading

huanghui8030 commented Apr 19, 2018 •

edited

Loading

tfnigel commented Oct 3, 2018 •

edited

Loading