大家好。 我有一个关于在vuejs中循环组件的问题。 我定义了一个组件以及一个模板标签，其中包含一个从数据库中获取一些数据的表（在laravel框架中）。现在我需要循环这个组件10次以上，并且不知道如何做到这一点！ 我在模板标签中使用了v-for但是没有工作
<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>