關於Vue的兩層for循環

vue的核心功能是for循環，雙層for循環的場景也是比較常見。

<script type="text/javascript">
        var vm = new Vue({
            el: "#ex",
            data: {
                data: [
                    { "Name": "馬良1", "Items": [{ "Score": 810 }, { "Score": 80 }, { "Score": 80 }] },
                    { "Name": "馬良2", "Items": [{ "Score": 80 }, { "Score": 80 }, { "Score": 80 }] },
                    { "Name": "馬良3", "Items": [{ "Score": 80 }, { "Score": 80 }, { "Score": 80 }] },
                    { "Name": "馬良4", "Items": [{ "Score": 80 }] }
                ]
            },
            methods: {
                woca: function () {
                    alert("卧槽")
                },
                fuck: function () {
                    this.data = [{ "Name": "馬良1", "Items": [{ "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }, { "Score": 810 }, { "Score": 80 }, { "Score": 80 }] }];
                }
            }
        });
        $('#Button1').click(function () {
            vm.fuck();
        });
    </script>

HTML代碼

   <div class="btn-group btn-group-md" role="group"  style="margin:10px;">
        <button type="button" id="Button1" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="row" id="ex">
        <div class="col-md-4" v-for="item in data">
            <div class="panel panel-default">
                <div class="panel-heading">{{item.Name}}</div>
                <div class="panel-body" style="max-height: 289px;overflow: auto;">
                    <div class="col-md-4" v-for="item1 in item.Items">
                        <div style="min-height:100px;border:1px solid #eee;margin-top:10px;line-height: 100px;text-align: center;font-size: 25px;border-radius: 15px;">
                            {{item1.Score}}
                        </div>
                        <div class="btn-group btn-group-xs" role="group" style="margin:10px;">
                            <button type="button" class="btn btn-primary">編輯</button><button type="button" class="btn btn-danger">刪除</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

v-for="item in data"
v-for="item1 in item.Items"