使用 VueJs2 绑定下拉选择的问题

Question

我有一个包含文档类型的下拉列表，我需要将所选类型存储在数据属性中，特别是 type.name ，以便我可以在子组件中引用它.但是，我的选择没有被存储。我做错了吗？

预期结果： type.name 在数据变量中可用。

<b-select
 :v-model="documentType" >
   <option
     v-for="type in group.documentTypes"
     :key="type.id"
     :value="type.id"
     :v-model="selected"
      >
     {{(type.name)}}
  </option>
</b-select>

 data() {
    return {
      waiting: {},
      timer: null,
      selected: ''
    }
  },

Answer 1

你非常接近，但你的 v-model 需要放在你的 select html 元素上。 Then when one of the options are selected the value of the option will be passed to it

<select v-model="selected">
   <option
     v-for="type in group.documentTypes"
     :key="type.id"
     :value="type.id">
     {{type.name}}
  </option>
</select>

Answer 2

只需将 v-model 放在 select-tag 上即可。使用 input-event，您可以将选择传递给 methods。

从这里更新：在那里你可以使用你选择的名字并将它传递给你的child.vue或者做任何你想做的事。

但请注意 - 不要写 :v-model 它只是 v-model !

代码

模板

<select v-model="selected_DT" @input="storeSelect(selected_DT)>
  <option v-for="type in documentTypes" :key="type.id">
    {{type.name}}
  </option>
</select>

脚本：

data() {
  return {
    selected_DT: null,
    documentTypes: [
        {"id": 1, "name": "Test1"},
        {"id": 2, "name": "Test2"},
        {"id": 3, "name": "Test3"},
    ] 
  }
},

methods: {
  storeSelect(selected_DT) {
    console.log(selected_DT) //it's selected name you can pass to your child.vue
  }
},

使用 VueJs2 绑定下拉选择的问题

Issues binding Dropdown selection with VueJs2

vue.js

vuejs2