Vue.js 在vue组件上循环

大家好。 我有一个关于在vuejs中的组件上循环的问题。 我定义了一个组件和一个模板标记，其中包含一个从数据库（在laravel框架中）获取一些数据的表。现在我需要在这个组件上循环10多次，但不知道如何执行此操作！。 我在模板标记中使用了v-for，但不起作用

---

票
数
匹配类型
日期
时间
价格
出售
购买
{{$matches[0]->matchType}
{{$matches[0]->matchDate}
{{$matches[0]->matchTime}
{{$matches[0]->price}
@{{soldTicket}}@{{sell}
Vue.组件（'csgo'{
模板：“#匹配id”，
数据：函数（）{
返回{
钱：''，
售出：''，
国家：错，
遗产：假，
B：错，
错误：“”，
票号:1,，
对象样式：{
背景：“浅绿色”
},
}
},
道具：['matches']，
方法：{
购买：功能（num）{
tempNum=num
num-=1000
if（num<0）{
this.money=tempNum
}
vm=这个
axios.post（'/matches/csgo-buy-ticket'，{tickets:
floor（vm.ticketNumber）}）.then（函数（响应）{
if（typeof（response.data）='string'）{
vm.error=response.data
vm.state=false
vm.Estate=！vm.state
vm.Bstate=false
}
否则{
vm.money=response.data[0]
vm.sell=response.data[1]
vm.state=true
vm.Estate=！vm.state
vm.Bstate=true
vm.objectStyle.background='darkred'
}
})
},
},
计算：{
soldTicket:函数（）{
vm=这个
get（'/selled ticket'）。然后（函数（响应）{
return vm.sell=response.data
})
},
账户与货币：功能（）{
var vm=这个
get（'/user account money'）。然后（函数
（答复）{
vm.money=response.data
})
},
},
})
新Vue({
el:“#应用程序”，
数据：{
列表：['']，
},
已创建：函数（）{
vm=这个
get（'/csgo matches'）。然后（函数（响应）{
console.log（response.data）
vm.list=response.data
})
},
})

显示Javascript。可能相关：@Bert，您需要任何代码来告诉他是否可以在组件上进行迭代？@Roy。完全无关。Vue不像普通js对象那样处理组件。这就是问题所在。

 <div id="app"> 
<csgo><csgo>
</div>    

<template id="match-id" >
<table  style="border: 2px solid black">
<tr >
    <th>Ticket</th>
    <th>Number</th>
    <th>Match Type</th>
    <th>Date</th>
    <th>Time</th>
    <th>Price</th>
    <th>Sold</th>
</tr>

    <tr>
        <td> <button @click='buy({{$user->profile->account_money}})' v-bind:style="objectStyle"  :disabled=Bstate >BUY</button>     </td>
        <td><input type="number" min="1" max="10" step="1" v-model="ticketNumber"></td>
        <td>{{$matches[0]->matchType}}</td>
        <td>{{$matches[0]->matchDate}}</td>
        <td>{{$matches[0]->matchTime}}</td>
        <td>{{$matches[0]->price}}</td>
        <td>@{{soldTicket}}@{{sold}}</td>


    </tr>

</table>
</template>


<script>



        Vue.component('csgo', {

            template: '#match-id',
            data: function () {

                return {

                    money: '',
                    sold: '',
                    state: false,
                    Estate: false,
                    Bstate: false,
                    error: '',
                    ticketNumber: 1,

                    objectStyle: {
                        background: 'lightgreen'
                    },


                }
            },


            props: ['matches'],

            methods: {


                buy: function (num) {

                    tempNum = num
                    num -= 1000

                    if (num < 0) {
                        this.money = tempNum
                    }

                    vm = this

                    axios.post('/matches/csgo-buy-ticket', {tickets: 
             Math.floor(vm.ticketNumber)}).then(function (response) {


                        if (typeof (response.data) == 'string') {
                            vm.error = response.data
                            vm.state = false
                            vm.Estate = !vm.state
                            vm.Bstate = false
                        }
                        else {
                            vm.money = response.data[0]
                            vm.sold = response.data[1]
                            vm.state = true
                            vm.Estate = !vm.state
                            vm.Bstate = true
                            vm.objectStyle.background = 'darkred'
                        }
                    })

                },

            },
            computed: {
                soldTicket: function () {
                    vm = this
                    axios.get('/sold-ticket').then(function (response) {

                        return vm.sold = response.data
                    })
               },

                account_money: function () {

                    var vm = this
                    axios.get('/user-account-money').then(function 
             (response) {

                        vm.money = response.data

                    })

                },
            },
        })

    new Vue({

        el:'#app',

        data:{
            list:[''],
        },
        created:function () {

            vm = this
            axios.get('/csgo-matches').then(function (response) {

              console.log(response.data)
                vm.list = response.data

            })

        },
           })
         </script>