"Invalid expression error" due to Javascript keyword "in" inside of a string in the expression #3846
Description
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>