Issues binding Dropdown selection with VueJs2-CodePudding

I have a dropdown list containing document types, in which I need the selected type to be stored in a data property, specifically the type.name , so I can reference it in a child component. However, my choice is not being stored. Am I going about this wrong?

Expected Result: type.name is available to me in a data variable.

<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: ''
    }
  },

CodePudding user response：

Just put your v-model on your select-tag. With an input-event you can pass your selection to methods.

UPDATE FROM HERE: There you can work with the name you've selected and pass it to your child.vue or do whatever you want.

But be aware - don't write :v-model it's only v-model !

CODE

TEMPLATE

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

SCRIPT:

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
  }
},

CodePudding user response：

You are very close but your v-model needs to be placed on your select html element. 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>