CODEWITHSUNDEEP
laravelformsvue.js
Philipp Kishkovarov
Philipp Kishkovarov

Reputation: 223

Laravel + Vue how to display values from selected item?

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: enter image description here

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!:)

Upvotes: 1

Views: 1171

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34924

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>

Upvotes: 1

Related Questions