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,
});

tasks表格由10个具有以下结构的条目组成

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

在我的 js文件中，我初始化了以下View-Model：

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篇文章传递到我的视图），则会出现以下错误关于 {{1} 组件：

<todo-item>

然而，当我减少任务数量我获取并传递到路线文件中的视图时，让我们说5视图呈现浏览器中的错误。

所以，我要问的是 *为什么当绑定表达式的长度发生变化时，我得到“无效表达式”错误* ，（例如，类似于“最大字符数” “允许在v-for指令中用作绑定表达式......？”。

最后一点： - 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"}] 组件（其中v-for指令实际上是其模板的一部分）即使我选择传递所有{{1来自我的路线文件

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

EDIT2 显然，问题似乎是由于Javascript关键字“in”存在于其中一个任务的主体内部（Vue 2.0.1中可能出现的错误，我们希望在下一个补丁版本中解决）。我已经在Vue github中打开了一个问题，以防有人对跟踪问题感兴趣。

Answer 1

浏览器限制了属性大小，在正常情况下你不应该接近命中。

尽管如此，你不应该在模板中拥有那些tasks。它们在您的代码中的其他任何位置都无法访问。您的组件data中的内容是什么？ tasks应该以某种方式来源于此。

Answer 2

显然，似乎问题是由于存在Javascript关键字＆＃34;＆＃34;其中一个任务的主体内部（Vue 2.0.1中的一个可能的错误，我们希望在下一个补丁版本中解决）。我已经在Vue的github here中打开了一个问题，以防有人对跟踪问题感兴趣

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

2 个答案: