Vue 2.0增加v-for指令中綁定表達式的長度時出現無效表達式錯誤

我正在玩Vue.js（v.2.0.1）。我創建在後端使用Laravel 5.3一個非常簡單的API：Vue 2.0增加v-for指令中綁定表達式的長度時出現無效表達式錯誤

在我路線文件

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文件中，我初始化了以下視圖模型：

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視圖呈現沒有錯誤在瀏覽器中。

那麼，我問的是*爲什麼我得到的「無效的表達式」的錯誤時，綁定表達式的長度變化*，（例如是類似的東西是允許一個「最大字符數」被用作v-for指令中的綁定表達式......）。

最後提醒：<todo-items>組件（其中V-的指令其實際上它的模板的一部分）是沒有問題呈現即使我選擇通過所有$task從我的路線文件

EDIT1：這是一個工作的jsfiddle能重現問題：https://jsfiddle.net/y8z5ojot/

EDIT2顯然，它似乎出現問題，由於「IN」的Javascript關鍵字的存在內部助教之一的身體ks（Vue 2.0.1中的一個可能的錯誤，我們期望在下一個補丁版本中解決）。如果有人有興趣跟蹤問題，我已在Vue的github中打開了一個問題。

來源

2016-10-02 ira

這不是您的問題的答案，但是如果您使用的是基於組件的方法，那麼最好使用' '組件擁有自己的''組件。你可以將'$ tasks'作爲道具傳遞給''，如：''並強制它成爲JSON（檢出道具強制 - 只在Vue 1.0.x中可用）。我可以向你展示一個例子，但我不想從你在這裏實際問到的東西中拿走。 – tptcat

@tptcat如果你可以共享一個JSBin/JSFiddle，那麼你可以使用基於組件的方法。關於原來的問題，我真正要問的是爲什麼當改變'v-for'指令中綁定表達式的長度時，我得到這個無效表達式錯誤，所以我相應地更新了我的OP。隨時作出更正 – ira

Vue 2.0增加v-for指令中綁定表達式的長度時出現無效表達式錯誤

回答

相關問題