Question

如何显示所选选项中的数据，例如文档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

您可以通过实施两项功能来制作component work with the v-model directive：

接受value道具
使用新值

input

首先，更改模板以将select标记绑定到整个post对象（而不仅仅是val属性）：

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

声明您的组件具有＆＃39;值＆＃39;属性：

props: ['value']

现在watch组件的post属性，并使用所选帖子发出input个事件：

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

然后，您只需在自定义组件上使用v-model指令：

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

以下是显示此内容的complete jsFiddle。

显示来自vue组件的所选选项的数据

1 个答案: