vueコンポーネントから選択したオプションのデータを表示

Question

docs vuejs.orgの例のように、コンポーネントを使用して、選択したオプションからデータを表示するにはどうすればよいですか？

<div id="app"> 
    <selection></selection> 
    <div v-if="post"> 
    selected post: 
    {{post.title}} 
    </div> 
    <div v-else> 
    no posts 
    </div> 
</div> 

main.js

Vue.component('selection', { 
    template: "<select v-model='post'><option v-for='post in posts' v-bind:value='post.val'>{{post.title}}<option></select>", 
    data: function() { 
    return { 
     posts: [{ 
     title: "lorem ipsum 1", val: '1' }, { 
     title: "lorem ipsum 2", val: '2' }, { 
     title: "lorem ipsum 3", val: '3' } 
     ], 
     post: null 
    } 
    }, 
}) 
new Vue({ 
    el: "#app", 
    data: { 
    post: null 
    } 
}).$mount('#app') 

fiddle

Answer 1

次の2つの機能実装することによって、あなたのcomponent work with the v-model directiveを行うことができます。

がを発するvalue小道具を受け入れる

• を新しい値でイベント

まず第一に、全体postオブジェクト（だけでなく、valのプロパティ）にごselectタグをバインドするために、あなたのテンプレートを変更します。

template: "<select v-model='post'><option v-for='post in posts' v-bind:value='post'>{{post.title}}<option></select>" 

は "を持っているあなたのコンポーネントを宣言値」プロパティ：今すぐ

props: ['value'] 

watchコンポーネントのプロパティpostとSELとinputイベントを発しますectedポスト：ここ

<selection v-model="post"></selection> 

はこの動作を示すcomplete jsFiddleです：

watch: { 
    post: function() { 
     this.$emit('input', this.post); 
    } 
    } 

その後、あなたは、単にあなたのカスタムコンポーネントのv-modelディレクティブを使用しています。