Vue.jsのv-forのスコープについて

Question

環境

Vue.js v2.1.10
Laravel5.4(bladeテンプレート)

質問

v-forを使用し、下記のように記述するとitem.item_nameが出力されるのですが、

<table>
    <tr v-for="item of items">
        <td>@{{ item.item_name }}</td>
    </tr>
</table>

下記のようにtdタグを削除するとitemが存在しないとエラーが発生します。

<table>
    <tr v-for="item of items">
        @{{ item.item_name }}
    </tr>
</table>

エラー内容

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

初歩的な事かもしれませんが、これはVue.jsの仕様なのでしょうか？
よろしくお願いいたします。

Answer 1

私もVue.jsを勉強中ですが、わかる範囲で記載させていただきます。
Laravel上で動かしていないので"@"を外し、最低限稼働するように,idと最小のスクリプトを付与し、稼働させて見るとエラーは出ませんでした。

▼html

<table id='test'>
    <tr v-for="item of items">
        <td>{{ item.item_name }}</td>
    </tr>
</table>

▼script

<script>
var test_data = [];
var test = new Vue({
	el:'#test',
  data:{items:test_data}
})
</script>

おそらくscript側のdataに"items"を設定されていないのではないでしょうか？
ここをコメントアウトすると同様のメッセージが出ましたので。

もちろん、上記にデータを与えてあげると、無事に取り込んでくれます。

test_data = [{item_name:'a'},{item_name:'b'},{item_name:'c'}];