[Vuejs]-Conditional on Blade To Vue.js 2

by

0👍

✅

you can manage your data before binding to table

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>

Leave a comment