使用Vuejs 2和Laravel 5.3處理來自數據庫的信息複選框的值操作

我正在嘗試使複選框加載來自數據庫的信息。我有一個可編輯的列，當複選框沒有被選中時，填充0，當它被選中時填充1。使用v模型，我可以根據來自數據庫的內容來選中或不選中複選框，但是在編寫更改時我不能這樣做，因爲在屬性中傳遞的值變爲true或false，而不是0或1。使用Vuejs 2和Laravel 5.3處理來自數據庫的信息複選框的值操作

我的html代碼：

<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>

我Vue.js代碼：

<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>

有人能幫助我嗎？我相信這是簡單的，但我不能這樣做

來源

2017-03-02 Daniel Cintra

如果你只是想設置檢查0或1而非true或false可以使用computed具有setter和使用v-model綁定到計算機來代替：

new Vue({ 
    el: "#app", 
    computed: { 
    isChecked: { 
     set(checked) { 
      this.checked = (checked) ? 1 : 0; 
     }, 
     get() { 
      return this.checked; 
     } 
    } 
    }, 
    data: { 
    checked: 1 
    } 
});

在

那麼你HTML：

<input type="checkbox" v-model="isChecked" />

這裏的的jsfiddle：https://jsfiddle.net/4t60akr8/

來源

2017-03-02 17:53:01

使用Vuejs 2和Laravel 5.3處理來自數據庫的信息複選框的值操作

回答

相關問題