I am trying to make a checkbox be loaded with information coming from the database. I have an editable column and it is filled with 0 for when the checkbox is not checked and 1 for when it is checked. Using the v-model I can make the checkbox come checked or not according to what comes from the database, however at the time of writing the change I can not because the value passed inside the property becomes true or false and not 0 Or 1.
My html code:
<template>
<div>
<div ref="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Criar / Editar</h4>
</div>
<div class="modal-body">
<form method="post" :action="action">
<input type="hidden" name="_token" :value="token">
<div class="form-group">
<label for="name" class="control-label">Descrição</label>
<input id="name" name="name" type="text" class="form-control" v-model="statuscampanha.status_campanha">
<div class="checkbox">
<label><input type="checkbox" name="editavel" v-model="statuscampanha.editavel">Editável</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</template>
My Vue.js Code:
<script>
import bus from '../utils/events/bus'
export default {
props:['token'],
data(){
return {
isEditing: false,
statuscampanha: {
id_status_campanha: 0,
status_campanha: '',
editavel: 0
},
}
},
computed:{
action (){
if (this.isEditing){
return `/agentes/public/status-campanha/atualizar/${this.statuscampanha.id_status_campanha}`
}else{
return `/agentes/public/status-campanha/criar`
}
},
},
mounted (){
const modal = $j(this.$refs.modal)
bus.$on('open-form', (obj) => {
if (obj !== undefined){
this.statuscampanha = obj.statuscampanha
this.isEditing = true
}else{
this.isEditing = false
}
modal.modal('show')
})
modal.on('hidden.bs.modal', () => {
this.statuscampanha.id_status_campanha = 0
this.statuscampanha.status_campanha = '',
this.statuscampanha.editavel = 0
})
},
}
</script>
Can someone help me? I believe this is simple, but I can not do it
Aucun commentaire:
Enregistrer un commentaire