Блог

Как я могу отобразить данные из выбранной опции, как в примере из документов 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')
  

скрипка

Вы можете заставить свой компонент работать с директивой v-model, реализовав две функции:

• принять value prop
• выдать input событие с новым значением

Прежде всего, измените свой шаблон, чтобы привязать ваш select тег ко всему post объекту (а не только к свойству val):

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

Объявите, что ваш компонент имеет свойство ‘value’:

 props: ['value']
  

Теперь watch свойство компонента post и генерирует input событие с выбранной записью:

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

Затем вы просто используете v-model директиву для своего пользовательского компонента:

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

Вот полный jsFiddle, показывающий это в действии.