[英]Setting a checkbox as checked with Vue.js and Laravel
我一直在谷歌搜索和玩我知道的每一個組合,但我無法讓我的復選框被初始化為選中狀態。
我的 controller
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);
})
},}}
這是我將如何做到的。 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到收藏。 也不要使用 v-model - 您的示例中不需要它
<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>
當您調用以下方法時,您可以使用Array.find()一旦獲得響應 laravel 並更新到您在VueJs
中的about
數組
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;
}
})
}
您也可以直接在<input type="checkbox" @click="checkChange($event,item)">
上使用click
事件,您可以調用 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.