带有选择输入的 Vue v-model

Question

我试图将我的选择输入中的任何选项设置为对象中的值。我正在尝试为此目的使用 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>

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>