Vue 2.0 Invalid expression error when increasing the length of a binding expression in a v-for directive

问题

I was playing around a little bit with Vue.js (v.2.0.1). I created a very simple api using Laravel 5.3 in the backend:

In my routes file

Route::get('/', function () {
    $tasks = Task::where('id', '<', 11)->get();

    return view('welcome', [
        'tasks' => $tasks,
});

The tasks table consists of 10 entries with the following structure

table
-------------------------------------------------
- id //a number
- body // a fake short paragraph
- timestamps // created_at, updated_at, etc....

In my js files, I initialize the following View-Model:

var vm = new Vue({
    el: '#my-app',
    data: data,
});

and I am using two custom components as follows:

Vue.component('todo-item', {
    template: '<li>{{ todo.body }}</li>',
    props: ['todo']
});

Vue.component('todo-items', {
    template: '<ul><li v-for="todo in todos">{{ todo.body }}</li</ul>',
    props: ['todos']
});

In welcome.blade.php view file I use the two components above as follows:

<div id="my-app">
    <h1>todo-item</h1>
    <ul>
        <todo-item v-for="todo in {{$tasks}}" :todo="todo"></todo-item>
    </ul>

    <h1>todo-items</h1>
    <todo-items :todos="{{$tasks}}"></todo-items>
</div>

Now, the problem:

If I run the code above (that is passing 10 articles to my view) in my browser I get the following error regarding the <todo-item> component:

- invalid expression: v-for="todo in [{"id":1,"body":"Magnam a sequi tempore dolore. Sapien...... /* a long string */ .....,"updated_at":"2016-09-30 14:42:54"}]

However, when I decrease the number of tasks I fetch and pass to the view in my routes file, lets say to 5 the view is rendered without errors in the browser.

So, what I am asking is * why i get the "invalid expression" error when the length of the binding expression is changing*, (for example is something like a "maximum number of characters" that is allowed to be used as a binding expression in v-for directive...?).

A final note: the <todo-items> component (where the v-for directive its actually part of its template) is rendered without problem even if I select to pass all the $task from my route files

EDIT1: This is a working JSFiddle that reproduces the problem: https://jsfiddle.net/y8z5ojot/

EDIT2 Apparently it seems that the problem occurs due to the existence of Javascript keyword "in" inside of the body of one of the tasks (a possible bug in Vue 2.0.1 which we expect to be solved in a next patch release). I have opened an issue in Vue's github in case someone is interested in tracking the problem.

回答1:

There's a browser limit on attribute size, which you should never come close to hitting in normal situations.

You shouldn't have those tasks in the templates like that anyway, though. They're inaccessible everywhere else in your code. What's in your components data? That's where tasks should be originating from in one way or another.

回答2:

Apparently it seems that the problem occurs due to the existence of Javascript keyword "in" inside of the body of one of the tasks (a possible bug in Vue 2.0.1 which we expect to be solved in a next patch release). I have opened an issue in Vue's github here in case someone is interested in tracking the problem

来源：https://stackoverflow.com/questions/39816953/vue-2-0-invalid-expression-error-when-increasing-the-length-of-a-binding-express

标签

laravel

Vue.js

blade