Laravel + Vue 如何显示所选项目的值？

Question

在 Vuejs 方面需要帮助，因为我对它很陌生。

我有表单选择器，并且取决于所选项目，我应该在表单下方显示所选项目的信息，并将此项目的id 发送到我的表单request。

视觉理解：

我试过v-bind:value="post.id" 像v-bind:value="post" 我可以轻松显示@{{post.goal}}，但它会向我的请求发送{object Object}。 请帮助谁有更多的技能。

我的选择器：

<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>

还有我的 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>

干杯，亲爱的！:)

Answer 1

创建一个方法getPostGoal 来获取所选索引的goal

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>

另一种解决方案是，设置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>