jeudi 2 mars 2017

Manipulating the value of a checkbox with information coming from the database with Vuejs 2 and Laravel 5.3

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">&times;</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