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

【问题标题】：Issues binding Dropdown selection with VueJs2使用 VueJs2 绑定下拉选择的问题
【发布时间】：2021-12-29 09:51:39
【问题描述】：

我有一个包含文档类型的下拉列表，其中我需要将所选类型存储在数据属性中，特别是 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: ''
    }
  },

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

只需将您的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
  }
},

【讨论】：

感谢您的回答，我应该提供更多上下文，因为我已经在 select 标签上有了必要的 V-Model。更新了该信息。
更新了它.. 对我来说，如果我选择“Test1”，我的console.log 向我展示了“Test1” - 希望它现在是正确的！

【解决方案2】：

您非常接近，但您的v-model 需要放在您的select html 元素上。然后选择其中一个选项时，选项的值将传递给它

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

【讨论】：