从vue组件中显示所选选项的数据

display data from selected option from vue component

本文关键字：选项 数据 显示 vue 组件      更新时间：2023-09-26

如何显示所选选项的数据，就像在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')

小提琴

你可以通过实现两个特性来让你的组件使用v-model指令:

  • 接收value道具
  • 发出一个具有新值
    • 的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事件与选定的post:

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

然后你只需在你的自定义组件上使用v-model指令:

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

下面是一个完整的jsFiddle，显示了它的作用。

相关文章：