gpressutto5

lista.pagar.component.js

Dec 6th, 2016
525
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.listaPagarComponent = Vue.extend({
  2.     template: `
  3. <div>
  4.     <h3 v-show="!contas.length" class="text-info text-center">Não há contas</h3>
  5.     <table class="table table-hover" v-show="contas.length">
  6.         <thead>
  7.             <tr>
  8.                 <th>#</th>
  9.                 <th>Vencimento</th>
  10.                 <th>Nome</th>
  11.                 <th>Valor</th>
  12.                 <th>Status</th>
  13.                 <th>Ações</th>
  14.             </tr>
  15.         </thead>
  16.         <tbody>
  17.             <tr v-for="(conta,index) in contas">
  18.                 <td>{{ index + 1 }}</td>
  19.                 <td>{{ conta.vencimento }}</td>
  20.                 <td>{{ conta.nome }}</td>
  21.                 <td>{{ 'R$ ' + conta.valor.toFixed(2) }}</td>
  22.                 <td><span class="label" :class="{ 'label-success': conta.pago, 'label-danger': !conta.pago }">{{ conta.pago | status }}</span></td>
  23.                 <td>
  24.                     <div class="dropdown">
  25.                         <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  26.                             Ações
  27.                             <span class="caret"></span>
  28.                         </button>
  29.                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  30.                             <li><router-link :to="{name: 'update', params: {index: index}}"><i class="fa fa-fw fa-pencil-square-o" aria-hidden="true"></i> Editar</router-link></li>
  31.                             <li><a href="#" @click.prevent="pagarConta(conta)"><i class="fa fa-fw fa-money" aria-hidden="true"></i> {{ conta.pago ? 'Não foi pago':'Pagar' }}</a></li>
  32.                             <li><a href="#" @click.prevent="removerConta(index,conta)"><i class="fa fa-fw fa-trash" aria-hidden="true"></i> Remover</a></li>
  33.                         </ul>
  34.                     </div>
  35.                 </td>
  36.             </tr>
  37.         </tbody>
  38.     </table>
  39. </div>
  40.     `,
  41.     data: function(){
  42.         return {
  43.             contas: [{id: 3,
  44.                 nome: "Conta de telefone",
  45.                 pago: false,
  46.                 valor: 55.99,
  47.                 vencimento: "22/08/2016"}]
  48.         }
  49.     },
  50.     beforeMount() {
  51.         axios.get('http://127.0.0.1/api/bills')
  52.             .then(function (response) {
  53.                 console.log("before: " + this.contas);
  54.                 this.contas = response.data;
  55.                 console.log("after: " + this.contas);
  56.             });
  57.     },
  58.     methods: {
  59.         pagarConta: function (conta) {
  60.             conta.pago = !conta.pago;
  61.         },
  62.         removerConta: function (index, conta) {
  63.             if (confirm("Tem certeza que deseja apagar " + conta.nome + "?")) {
  64.                 this.contas.splice(index, 1);
  65.             }
  66.         }
  67.     }
  68. });
RAW Paste Data