[Vuejs]-Issues binding Dropdown selection with VueJs2

by

0👍

✅

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

0👍

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>

Leave a comment