以Blade To Vue.js 2为条件

Question

我想将下面的条件代码转换为vue.js语义

<table>
    <div class="btn-group" data-toggle="buttons">
        <tr>
            @foreach($sintese as $s)
                <td>
                    <label class="btn btn-primary">
                        <input type="checkbox" autocomplete="off" name="chksintese" id="{{$s->cod_sintese_conversa}}">
                        <span class="glyphicon glyphicon-ok"></span>
                        {{$s->descricao}}
                    </label>
                </td>

                @if ($loop->iteration % 10 == 0 && !$loop->last)
                    </tr><tr>
                @endif
            @endforeach
        </tr>
    </div>
</table>

Answer 1

您可以在绑定到表之前管理数据

 new Vue({ el: '#table', computed:{ newItems: function (){ var tempItem = []; var slice = 10; for (var i = 0; i < this.it.length/slice; i++) { tempItem.push(this.it.slice(i*slice, slice*(i+1))); } return tempItem; } }, data: { it: [{"cod_sintese_conversa":"cod_sintese_conversa1","descricao":"descricao1"},{"cod_sintese_conversa":"cod_sintese_conversa2","descricao":"descricao2"},{"cod_sintese_conversa":"cod_sintese_conversa3","descricao":"descricao3"},{"cod_sintese_conversa":"cod_sintese_conversa4","descricao":"descricao4"},{"cod_sintese_conversa":"cod_sintese_conversa5","descricao":"descricao5"},{"cod_sintese_conversa":"cod_sintese_conversa6","descricao":"descricao6"},{"cod_sintese_conversa":"cod_sintese_conversa7","descricao":"descricao7"},{"cod_sintese_conversa":"cod_sintese_conversa8","descricao":"descricao8"},{"cod_sintese_conversa":"cod_sintese_conversa9","descricao":"descricao9"},{"cod_sintese_conversa":"cod_sintese_conversa10","descricao":"descricao10"},{"cod_sintese_conversa":"cod_sintese_conversa11","descricao":"descricao11"},{"cod_sintese_conversa":"cod_sintese_conversa12","descricao":"descricao12"},{"cod_sintese_conversa":"cod_sintese_conversa13","descricao":"descricao13"},{"cod_sintese_conversa":"cod_sintese_conversa14","descricao":"descricao14"},{"cod_sintese_conversa":"cod_sintese_conversa15","descricao":"descricao15"},{"cod_sintese_conversa":"cod_sintese_conversa16","descricao":"descricao16"},{"cod_sintese_conversa":"cod_sintese_conversa17","descricao":"descricao17"},{"cod_sintese_conversa":"cod_sintese_conversa18","descricao":"descricao18"},{"cod_sintese_conversa":"cod_sintese_conversa19","descricao":"descricao19"},{"cod_sintese_conversa":"cod_sintese_conversa20","descricao":"descricao20"},{"cod_sintese_conversa":"cod_sintese_conversa21","descricao":"descricao21"},{"cod_sintese_conversa":"cod_sintese_conversa22","descricao":"descricao22"},{"cod_sintese_conversa":"cod_sintese_conversa23","descricao":"descricao23"},{"cod_sintese_conversa":"cod_sintese_conversa24","descricao":"descricao24"},{"cod_sintese_conversa":"cod_sintese_conversa25","descricao":"descricao25"},{"cod_sintese_conversa":"cod_sintese_conversa26","descricao":"descricao26"},{"cod_sintese_conversa":"cod_sintese_conversa27","descricao":"descricao27"},{"cod_sintese_conversa":"cod_sintese_conversa28","descricao":"descricao28"},{"cod_sintese_conversa":"cod_sintese_conversa29","descricao":"descricao29"},{"cod_sintese_conversa":"cod_sintese_conversa30","descricao":"descricao30"},{"cod_sintese_conversa":"cod_sintese_conversa31","descricao":"descricao31"}] } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> <table id="table"> <div class="btn-group" data-toggle="buttons"> <tr v-for="items in newItems"> <td v-for="item in items"> <label class="btn btn-primary"> <input type="checkbox" autocomplete="off" name="chksintese" :id="item.cod_sintese_conversa"> <span class="glyphicon glyphicon-ok"></span> {{item.descricao}} </label> </td> </tr> </div> </table>