Question

我正在尝试使用来自数据库的信息来加载复选框。我有一个可编辑的列，它在未选中复选框时填充为0，在选中时填充为1。使用v模型我可以根据来自数据库的内容来选中或不选中复选框，但是在编写更改时我不能，因为在属性内传递的值变为true或false而不是0或1。

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

有人能帮助我吗？我相信这很简单，但我不能这样做

Answer 1

如果您只想将检查设置为0或1而不是true或false，则可以将computed与setter一起使用并使用{ {1}}绑定到计算器而不是：

v-model

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

HTML

这是JSFiddle：https://jsfiddle.net/4t60akr8/

使用Vuejs 2和Laravel 5.3来处理来自数据库的信息的复选框的值

1 个答案: