Vue v-model with select input

Question

I'm trying to have any option within my select input to be set as a value in an object. I'm trying to use v-model for this purpose but I'm not exactly sure how. Below is what I've tried to do so far.

<div class="select-wrapper">
  <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">
      <option value="" selected="selected">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="other">Other</option>
  </select>
 </div>

logee · Accepted Answer · 2020-08-14T01:11:12.437

8

Need a prop to bind the selected value and pass that prop to v-model. E.g.

<template>
  <div>
    <pre>category = {{ category }}</pre>
    <select required name="category" id="category" v-model="category">
      <option value="">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="nxp">NXP</option>
    </select>
  </div>
</template>

<script>

export default {
  data() {
    return {
      category: null
    };
  }
};
</script>

Edit: plunker

edited Aug 14 '20 at 01:11

answered Aug 14 '20 at 01:02

logee

5,017
1
26
34

2

Yes but category in the data method stays as null. It does not change to be whatever the option value is currently on. Also, v-model makes the first option not appear within the selectbox by default – albert_anthony6 Aug 14 '20 at 01:05
@albert_anthony6 What do you mean? it's working as is in the plunker – logee Aug 14 '20 at 01:11
Oh yes, you were right. It was just a typo on my end. Still facing the issue that v-model causes the select box to appear empty by default until the user interacts with it. Any idea on how to fix this? – albert_anthony6 Aug 14 '20 at 01:16
1

@albert_anthony6 initialize category to an empty string `category: ""`, I've updated the plunker – logee Aug 14 '20 at 01:25

score 3 · Answer 2 · answered Aug 14 '20 at 01:05

You should add value prop to your component :

<div class="select-wrapper">
  <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">
      <option value="" selected="selected">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="other">Other</option>
  </select>
 </div>

<script>

export default {
 props:value
};
</script>

and use it in parent component like :

<my-select v-model="category"/>
...
<script>

export default {
  data() {
    return {
      category: ''
    };
  }
};
</script>

Vue v-model with select input

2 Answers2

Linked