Vue 2.0 在 v-for 指令中增加绑定表达式的长度时出现无效表达式错误

Question

我在玩 Vue.js (v.2.0.1)。我在后端使用 Laravel 5.3 创建了一个非常简单的 api：

在我的路由文件中

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

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

taskstable由10个条目组成，结构如下

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

在我的 js 文件 中，我初始化了以下视图模型：

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

我正在使用两个自定义组件，如下所示：

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']
});

在welcome.blade.php查看文件我使用上面的两个组件如下：

<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>

现在，问题：

如果我在浏览器中运行上面的代码（将 10 篇文章传递到我的视图），我会得到以下错误关于 <todo-item> 组件：

- 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"}]

但是，当我减少任务数量时，我获取并传递到我的路由文件中的视图，假设为 5视图在浏览器中呈现 没有错误。

所以，我要问的是 * 为什么当绑定表达式的长度发生变化时我会收到 "invalid expression" 错误*，（例如类似于允许在 v-for 指令中用作绑定表达式的 "maximum number of characters"...？）。

最后一点：即使我 select 从我的路由文件

中传递所有 $task

EDIT1：这是一个重现问题的工作 JSFiddle：https://jsfiddle.net/y8z5ojot/

EDIT2 显然，问题似乎是由于 Javascript 关键字 "in" 存在于其中一个任务的正文中（a Vue 2.0.1 中可能存在的错误，我们希望在下一个补丁版本中解决）。我已经在 Vue 的 github 中打开了一个问题，以防有人有兴趣跟踪这个问题。

Answer 1

浏览器对属性大小有限制，在正常情况下你永远不会接近这个限制。

无论如何，您不应该在模板中使用那些 tasks。在您的代码中的其他任何地方都无法访问它们。您的组件 data 中有什么？这就是 tasks 应该以某种方式起源的地方。

Answer 2

显然，问题的发生似乎是由于 Javascript 关键字 "in" 存在于其中一个任务 的正文中（一个可能的Vue 2.0.1 中的错误，我们希望在下一个补丁版本中解决）。我已经在 Vue 的 github here 中打开了一个问题，以防有人有兴趣跟踪这个问题

Vue 2.0 在 v-for 指令中增加绑定表达式的长度时出现无效表达式错误

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

laravel

blade

vue.js