Getting data from database using vuejs and laravel - php

Question

I have a select element and based on the the selection, data is to be retrieved based on the id selected.
blade template
<div id="pers_obj" class="form-group form-duration-div">
{{Form::label("personal_objective", "Personal Objective/KPA")}}
<select name="personal_objective" id="personal_objective" v-model="personal_objective">
<option value="0" class="form-control">--Select Objective--</option>
#foreach($personal_objectives as $personal_objective)
<option value="{{ $personal_objective->id }}" class="form-control">{{ $personal_objective->name}}</option>
#endforeach
</select>
<div v-cloak>#{{personal_objective}}</div>
</div>`
measure.js
var pers_objective = new Vue({
el: '#pers_obj',
data:{
personal_objective: null
},
});
How can I:
retrieve data from database using vuejs
display data from the database using vue js

Answer 1

Looks like you are mixing a bit the PHP and JavaScript code trying some luck. The best way is creating a service response to get the personal objectives like an API.
So lets supose that you create a controller, called at /personal-objectives for example, that returns an array of objects with the structure of { id: number, name: string }
Then your code for the HTML would look like:
<div id="pers_obj" class="form-group form-duration-div">
<select name="personal_objective" v-model="personal_objective">
<option value="0" class="form-control">--Select Objective--</option>
<option v-for="po in pos" value="#{{ po.id }}" class="form-control">#{{ po.name }}</option>
</select>
</div>
And your JavaScript (assuming you are ussing vue-resource library for ajax calls) like:
var pers_objective = new Vue({
el: '#pers_obj',
data: function() {
return {
personal_objective: null,
pos: [];
};
}
created: function() {
this.loadPersonalObjectives();
}
methods: {
loadPersonalObjectives: function() {
this.$http.get('personal-objectives').then((response) => {
this.pos = response.data.pos;
}, (response) => {
console.log(response);
});
}
}
});
The above code will make an ajax GET call when the component is created to /personal-objectives which will return a JSON (don't forget to return the array encoded this way and set the proper header) array of bjects that on error will be displayed in console, and on succed the array will be assigned to the pos javascript variable and updated in the HTML creating the corresponding options reactively!
You may need to update the URL adding the root / in case you are not configuring the vue-resource with the root option (Vue.http.options.root)