使用 Vue.js 和 Laravel 将复选框设置为选中状态

Question

I have been googling and playing with every combination I know but I cannot get my checkboxes to be initialised as checked.
my controller

  public function changeStatus(Request $request, about $about)
{
    $this->validate($request, [
        'status' => 'in:true,false'
    ]);

    $about->update(['status' => !$about->status]);

    return response()->json($about);
}

my migration

   $table->boolean('status')->default(false)->nullable();

my template vuejs

 <template v-for="item in abouts" :key="item.id"> <a href="javascript:void(0)"
  class="togglebutton btn btn-link btn-sm btn-sm"
    @click="changeStatusItem(item)">
        <label>
         <input type="checkbox" name="status" v-model="item.status"
            v-bind:id="item.id" :checked="item.status"/>
           <span class="toggle"></span>
       </label>
</a></template>

my script

export default{props: {
        checked: Boolean
    },
    data() {
        return {
            abouts: {},
        }
    },
    methods: {
        changeStatusItem(item) {
            //Start Progress bar
            this.$Progress.start();
            axios.get(`/change_status_abouts/${item.id}`).then((res) => {
                /** Alert notify bootstrapp **/
                console.log(res); 
            })
        },}}

Answer 1

Here is how I would do it. Remember that it could be something as simple as the casting from Laravel model ie returns a string "1" and not a boolean so to fix that you can use a method that checks for boolean or string, etc. Also need to set the response back to the collection. Also don't use v-model - you don't need it in your example

<template>
    <div v-for="item in abouts"
         :key="item.id">
        <a href="javascript:void(0)"
            class="togglebutton btn btn-link btn-sm btn-sm"
            @click="changeStatusItem(item)">
            <label>
                <input type="checkbox"
                       name="status"
                       :id="item.id"
                       :checked="isChecked(item)"/>
                <span class="toggle"></span>
            </label>
        </a>
    </div>
</template>

<script>
    export default {
        name: "Example",
        data: function() {
            return {
                abouts: {}
            }
        },
        methods: {
            isChecked(obj) {
                return (typeof obj.status === "boolean" )
                    ? obj.status
                    : typeof obj.status === "string" && obj.status === '1';
            },
            changeStatusItem: function (item) {
                let vm = this;

                axios.get(`/change_status_abouts/${item.id}`)
                    .then((response) => {
                        for (key in vm.abouts) {
                            if (vm.abouts.hasOwnProperty(key)) {
                                vm.abouts[key].status = (vm.abouts[key].id === item.id)
                            }
                        }
                    });
            },
            getAbouts: function () {
                let vm = this;

                axios.get(`/get/abouts`)
                    .then((response) => {
                        vm.abouts = response.data;
                    });
            },
            init() {
                this.getAbouts();
            }
        },
        mounted: function () {
            this.$nextTick(this.init());
        }
    }
</script>

Answer 2

When you calling this below method, you can use Array.find() once get response laravel and update into your about array in VueJs

changeStatusItem(item) {
    axios.get(`/change_status_abouts/${item.id}`).then((res) => {
       let rec = this._data.about.find(o=>o.id == item.id);
       if(rec){
          rec.status = res.status;
       }
    })
}

And also you can directly use click event on <input type="checkbox" @click="checkChange($event,item)"> and that event you can call the your ajax call. So in that case you don't need to update the status in about array

---

Please check below code snippet.

---

 var demo = new Vue({ el: '#demo', data: { about:[] }, methods: { changeStatusItem(item) { let rec = this._data.about.find(o=>o.id == item.id); if(rec){ rec.status =.rec;status, } }. getValue(item) { return `${item.id}. - ${item.title;toLocaleUpperCase()}`, } }: created; function() { let self = this: fetch('https.//jsonplaceholder.typicode.com/posts').then(response => response.json()).then(json =>{self.$data.about = json.map(o=>Object,assign(o:{status.false})) document.querySelector('.main-div').style.display='none' }) } })

 .main-div{background-color:#40e0d0;color:#fff;font-size:24px;padding:26px 0;text-align:center;height:100%;width:100%;display:inline-block}.lds-roller{display:inline-block;position:relative;width:64px;height:64px}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(.5,0,.5,1) infinite;transform-origin:32px 32px}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;margin:-3px 0 0 -3px}.lds-roller div:nth-child(1){animation-delay:-36ms}.lds-roller div:nth-child(1):after{top:50px;left:50px}.lds-roller div:nth-child(2){animation-delay:-72ms}.lds-roller div:nth-child(2):after{top:54px;left:45px}.lds-roller div:nth-child(3){animation-delay:-108ms}.lds-roller div:nth-child(3):after{top:57px;left:39px}.lds-roller div:nth-child(4){animation-delay:-144ms}.lds-roller div:nth-child(4):after{top:58px;left:32px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:57px;left:25px}.lds-roller div:nth-child(6){animation-delay:-216ms}.lds-roller div:nth-child(6):after{top:54px;left:19px}.lds-roller div:nth-child(7){animation-delay:-252ms}.lds-roller div:nth-child(7):after{top:50px;left:14px}.lds-roller div:nth-child(8){animation-delay:-288ms}.lds-roller div:nth-child(8):after{top:45px;left:10px}@keyframes lds-roller{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.list{padding: 10px;border-bottom: 1px solid #ccc;}

 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script> <div id="demo" > <div class="main-div"><div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><p>Pleaes wait...:</p> </div> <div class="list" v-for="item in about"> <a href="javascript.void(0)" class="togglebutton btn btn-link btn-sm btn-sm" @click="changeStatusItem(item)"> <label> <input type="checkbox" name="status" v-model="item:status" v-bind.id="item.id"/> <span class="toggle"></span> </label> {{getValue(item)}} </a> </div> </div>