Vue

by WILLIAM CORREA

HTML

<script src="https://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<div id="intercamaras_admin" class="esquerda-admin internas__box">
  <div class="form-container" v-for="(programacao, index) in programacoes">
						<input type=hidden :name=`programacao[${index}][id_local]` v-model="local_id"/>
						<input type=hidden :name=`programacao[${index}][id]` v-model="programacao.id"/>
						<input type=hidden :name=`programacao[${index}][remover]` v-model="programacao.remover"/>

						<div  class="field-1 form-texto">
							<input :name=`programacao[${index}][inicio]` placeholder="Horário de Início" class="hora"  v-bind:class="{remover: programacao.remover}" v-mask="{ mask: '99:99', placeholder: '__:__' }" @input="programacao.inicio = $event">
						</div>
						<div  class="field-1 form-texto">
							<input type="text" :name=`programacao[${index}][fim]` placeholder="Horário" class="hora" v-bind:class="{remover: programacao.remover}" v-mask="{ mask: '00:00', placeholder: '__:__' }" @input="programacao.fim = $event">
						</div>
						<div class="field-10 form-texto">
							<input :name=`programacao[${index}][titulo]` placeholder="Título da programação" v-model="programacao.titulo" v-bind:class="{remover: programacao.remover}">
						</div>
						<div class="field-12 form-texto">
							<input :name=`programacao[${index}][descricao]` placeholder="Descrição" v-model="programacao.descricao" v-bind:class="{remover: programacao.remover}">
						</div>
						<div class="field-6 form-checkbox">
							<input :id=`programacao[${index}][curso]` :name=`programacao[${index}][curso]` type="checkbox" v-model="programacao.curso" >
							<label :for=`programacao[${index}][curso]`>Curso?</label>
						</div>
						<button type="button" class="" @click="switchRemoveProgramacao(index)" v-bind:class="{'bt--remover': programacao.remover}">{{programacao.remover ? 'Cancelar remoção'...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#intercamaras_admin {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

var intercamaras_admin = new Vue({
  el: '#intercamaras_admin',
  data: {
    programacoes: [],
    local_id: ""
  },
  methods: {
    addNewProgramacao() {
      this.programacoes.push({
        titulo: '',
        descricao: '',
        inicio: '',
        fim: '',
        curso: false,
        remover: false
      })      
    },
    switchRemoveProgramacao(id) {
      this.programacoes[id].remover = !this.programacoes[id].remover
    },
    getProgramacao() {
    }
  }, directives: {
    time: {
      inserted: function(el) {
        $(el).mask('00:00')
      }
    },
    mask: {
      inserted: function(el, binding) {
        console.log(el)
        if(typeof binding.value === 'object') {
          $(el).mask('00:00')
          return
        }
        // $(el).mask(binding.value)
      }
    }
  }, mounted: function () {
  this.$nextTick(function () {
    this.addNewProgramacao()
  })
}
})