"Invalid expression error" due to Javascript keyword "in" inside of a string in the expression

[iraklisg]

Vue.js version

2.0.1

Reproduction Link

https://jsfiddle.net/y8z5ojot/

Steps to reproduce

Replace the following inline expression (total number of tasks in list = 5)
todo in [{'id':1,'body':'Amet enim maxime sint corrupti velit. Voluptatem vel quis non eum assumenda omnis. Nemo nemo aperiam sequi vel repellat et.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':2,'body':'Alias non quae dolores debitis quia libero. Earum fuga rem provident. Esse consequatur facere at enim laudantium. Quia et tempora et pariatur animi porro.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':3,'body':'Mollitia eaque doloremque esse fuga. Magnam qui non distinctio quam expedita et possimus commodi. Cupiditate illo modi suscipit qui id aut.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':4,'body':'At corrupti recusandae libero aut cupiditate. Illo aperiam fugit voluptas laboriosam rerum soluta doloremque. Nulla praesentium eos magnam aut qui magnam.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':5,'body':'Est et inventore est minus qui aut. Veritatis et vitae beatae doloremque ut veniam. Autem ad tenetur enim dolorem aut ea.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':6,'body':'Est voluptas dicta et ipsam blanditiis eveniet. Quaerat reiciendis tempore dolor in qui repudiandae adipisci. Explicabo facilis harum ducimus consequatur aut itaque et. Facere aspernatur accusantium qui assumenda.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'}]

with this one (total number of tasks in list = 6 , one extra task added)
todo in [{'id':1,'body':'Amet enim maxime sint corrupti velit. Voluptatem vel quis non eum assumenda omnis. Nemo nemo aperiam sequi vel repellat et.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':2,'body':'Alias non quae dolores debitis quia libero. Earum fuga rem provident. Esse consequatur facere at enim laudantium. Quia et tempora et pariatur animi porro.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':3,'body':'Mollitia eaque doloremque esse fuga. Magnam qui non distinctio quam expedita et possimus commodi. Cupiditate illo modi suscipit qui id aut.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':4,'body':'At corrupti recusandae libero aut cupiditate. Illo aperiam fugit voluptas laboriosam rerum soluta doloremque. Nulla praesentium eos magnam aut qui magnam.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':5,'body':'Est et inventore est minus qui aut. Veritatis et vitae beatae doloremque ut veniam. Autem ad tenetur enim dolorem aut ea.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':6,'body':'Est voluptas dicta et ipsam blanditiis eveniet. Quaerat reiciendis tempore dolor in qui repudiandae adipisci. Explicabo facilis harum ducimus consequatur aut itaque et. Facere aspernatur accusantium qui assumenda.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'}]

What is Expected?

It is expected to list all tasks, including the new one, as before

What is actually happening?

It fails with the following error

vue.js:2574 [Vue warn]: failed to compile template:

- invalid expression: v-for="todo in [{'id':1,'body':'Amet enim maxime sint corrupti velit. Voluptatem vel quis non eum assumenda omnis. Nemo nemo aperiam sequi vel repellat et.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':2,'body':'Alias non quae dolores debitis quia libero. Earum fuga rem provident. Esse consequatur facere at enim laudantium. Quia et tempora et pariatur animi porro.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':3,'body':'Mollitia eaque doloremque esse fuga. Magnam qui non distinctio quam expedita et possimus commodi. Cupiditate illo modi suscipit qui id aut.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':4,'body':'At corrupti recusandae libero aut cupiditate. Illo aperiam fugit voluptas laboriosam rerum soluta doloremque. Nulla praesentium eos magnam aut qui magnam.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':5,'body':'Est et inventore est minus qui aut. Veritatis et vitae beatae doloremque ut veniam. Autem ad tenetur enim dolorem aut ea.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'},{'id':6,'body':'Est voluptas dicta et ipsam blanditiis eveniet. Quaerat reiciendis tempore dolor in qui repudiandae adipisci. Explicabo facilis harum ducimus consequatur aut itaque et. Facere aspernatur accusantium qui assumenda.','completed':0,'created_at':'2016-09-30 12:23:30','updated_at':'2016-09-30 12:23:30'}]"

(found in root instance)

More notes
The same error occurs if you are injecting the tasks list to the view from the server, (e.g, using laravel+blade in the backend, when requesting for 5 tasks, everything works ok. If client request for more, then fails as above)

<todo-item v-for="todo in {{$serverData}}" :todo="todo"></todo-item>

[iraklisg]

According to @phanan

It's not about the length of the tasks, but interestingly because your sixth task has a reserved in keyword in its body, which causes Vue's template parser to fail. You can reproduce the issue very easily by using only one task with body: 'Ametriam in sequi vel repellat et.' Reproducing fiddle: https://jsfiddle.net/y8z5ojot/8/

[defcc]

Keywords in breaks the forAliasRE regexp expression, I will try to make a pr. https://github.com/vuejs/vue/blob/dev/src/compiler/parser/index.js#L19

[defcc]

@iraklisg I update the fiddler here https://jsfiddle.net/y8z5ojot/9/ . You could assign your server data to a variable, and then initalize your app, this would be a better way