display data from selected option from vue component

Question

How can I display the data from selected option, like in the example from docs vuejs.org but with component?

<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

Why do you want to access selected post from parent. do it in the component itself. — imrealashu
– imrealashu, Commented Oct 10, 2016 at 4:14

PatrickSteele · Accepted Answer · 2016-10-10 13:37:59Z

3

You can make your component work with the v-model directive by implementing two features:

accept a value prop
emit an inputevent with the new value

First off, change your template to bind your select tag to the entire post object (not just the val property):

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

Declare your component to have a 'value' property:

props: ['value']

Now watch the component's post property and emit an input event with the selected post:

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

Then you simply use the v-model directive on your custom component:

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

Here is a complete jsFiddle showing this in action.

answered Oct 10, 2016 at 13:37

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yurii Over a year ago

Yes, exactly what I was looking for. Thanks for explanation.

Collectives™ on Stack Overflow

display data from selected option from vue component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related