具有 select 输入的 Vue v-model

Question

我正在尝试将 select 输入中的任何选项设置为对象中的值。我正在尝试为此目的使用 v-model 但我不确定如何使用。以下是我到目前为止尝试做的事情。

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

Answer 1

需要一个道具来绑定所选值并将该道具传递给 v-model。例如

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

编辑：plunker

Answer 2

您应该将 value 道具添加到您的组件中：

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

并在父组件中使用它，例如：

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

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

具有 select 输入的 Vue v-model

Vue v-model with select input

javascript

html

vue.js

drop-down-menu

v-model