Hi i am new to Vue js & Laravel Spark. I want to store checkbox values in my Database and retrieve the selected values. But i am struggling to get checked values from Database after refreshing the page. PLEASE help me
My Vue Js code below
Vue.component('update-company-profile', { props: ['user'],
data() {
return {
form: new SparkForm({
name: '',
checkedNames: [
{
"name": 'Business',
"id": 1
},
{
"name": 'Business1',
"id": 2
},
{
"name": 'Business2',
"id": 3
},
],
selected: [],
})
};
},
created() {
this.getUserSetting();
},
mounted() {
this.form.practise_name = this.user.name;
this.form.selected = json_encode(this.user.selected);
},
methods: {
getUserSetting() {
this.$http.get('/api/user/setting')
.then(response => {
this.setting = response.data;
this.updateSetting();
});
},
updateSetting() {
this.form.practise_name = this.setting.name;
this.form.selected = this.setting.selected;
},
update() {
Spark.put('api/settings/company-profile', this.form)
}
}
});
View Code Below:
<form class="form-horizontal" role="form">
<div class="form-group" :class="{'has-error': form.errors.has('name')}">
<label class="col-md-4 control-label">Practise Name</label>
<input type="text" class="form-control" name="name" v-model="form.name">
<div v-for="item in form.checkedNames">
<input name="item.name" type="checkbox" v-model="form.selected"> <label>@</label>
</div>
<!-- Update Button -->
<div class="form-group">
<div class="col-md-offset-4 col-md-6">
<button type="submit" class="btn btn-primary"
@click.prevent="update"
:disabled="form.busy">
Update
</button>
</div>
</div>
Store Method in Controller:
public function store(Request $request){
$selected_value = implode(",", $request->get('selected'));
$userid = Auth::user()->id;
if (User::find($userid)->settings) {
//If User Id Present
return $request->user()->settings()->update([
'name' => $request->name,
'selected' => $selected_value,
]);
}
else {
// User Id Not Present
return $request->user()->settings()->create([
'name' => $request->name,
'selected' => $selected_value,
]);
}
}
Please advice me to store and retrieve the checked values.
via AS Jessica
