Laravel + Vue how to display values from selected item? - laravel

Question

Need help with Vuejs, as I'm very new to it.
I have form selector, and depends on selected item I should display information from selected item below the form and send id of this item to my form request.
Visual understand:
I have tried v-bind:value="post.id" make like v-bind:value="post"
and I can easy display #{{post.goal}}, but it sends {object Object} to my request.
Please help who have more skill.
My selector:
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='post in posts' v-bind:value="post.id">#{{post.title}}</option>
</select>
{{-- Here I need help --}}
<div v-if="post">
selected post:
#{{post.goal}} {{-- HOW TO DISPLAY GOAL IN DOM? --}}
</div>
And my Vue:
<script type="text/javascript">
new Vue({
el: "#equity-name",
data: function() {
return {
posts: [
#foreach($company->equities as $equity)
{title: "{{ $equity->name }}", id: '{{ $equity->id }}', goal: '{{ $equity->goal() }}' },
#endforeach
],
post: null
}
},
})
</script>
Cheers, love!:)

Answer 1

Make a method getPostGoal to get goal of selected index
new Vue({
el:"#app",
data:{
posts:[
{id:1,title:'test1',goal:'goal1'},
{id:2,title:'test2',goal:'goal2'},
{id:3,title:'test3',goal:'goal3'},
],
post:1
},
methods:{
getPostGoal:function(id=null){
if(id){
var index = this.posts.map(e=>e.id).indexOf(id);
return this.posts[index].goal;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='p in posts' v-bind:value="p.id">{{p.title}}</option>
</select>
<div v-if="post">
selected post:
{{getPostGoal(post)}}
</div>
</div>
</div>
</div>
Another solution is, set object as value
new Vue({
el:"#app",
data:{
posts:[
{id:1,title:'test1',goal:'goal1'},
{id:2,title:'test2',goal:'goal2'},
{id:3,title:'test3',goal:'goal3'},
],
post:{goal:'NA'}
},
mounted(){
if(this.posts.length){
this.post = this.posts[0];
}
},
methods:{
getPostGoal:function(id=null){
if(id){
var index = this.posts.map(e=>e.id).indexOf(id);
return this.posts[index].goal;
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div class="uk-form-controls" id="equity-name">
<select name="share_id" v-model="post">
<option v-for='p in posts' v-bind:value="p">{{p.title}}</option>
</select>
<div v-if="post">
selected post:
{{post.goal}}
</div>
</div>
</div>
</div>