Установка флажка в соответствии с Vue.js и Laravel

Question

Я гуглил и играл с каждой знакомой мне комбинацией, но я не могу инициализировать свои чекбоксы как проверенные.
мой контроллер

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

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

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

моя миграция

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

мой шаблон 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>

мой скрипт

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

Когда вы вызываете этот метод ниже, вы можете использовать Array.find () , как только получите ответ laravel и обновите свой массив about в 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;
       }
    })
}

ИТакже вы можете напрямую использовать click событие на <input type="checkbox" @click="checkChange($event,item)">, и это событие вы можете вызвать на свой AJAX-вызов.Поэтому в этом случае вам не нужно обновлять статус в about массиве

---

Пожалуйста, проверьте приведенный ниже фрагмент кода.

---

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>

Answer 2

Вот как бы я это сделал.Помните, что это может быть что-то столь же простое, как приведение из модели Laravel, т.е. возвращает строку «1», а не логическое значение, чтобы исправить это, вы можете использовать метод, который проверяет логическое значение или строку и т. Д. Также необходимо установить ответ обратнов коллекцию.Также не используйте v-модель - она ​​вам не нужна в вашем примере

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