带有选择输入的 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>&nbsp; <div>&nbsp; &nbsp; <pre>category = {{ category }}</pre>&nbsp; &nbsp; <select required name="category" id="category" v-model="category">&nbsp; &nbsp; &nbsp; <option value="">Category*</option>&nbsp; &nbsp; &nbsp; <option value="attendee">Attendee</option>&nbsp; &nbsp; &nbsp; <option value="distributor">Distributor</option>&nbsp; &nbsp; &nbsp; <option value="sponsor">Sponsor</option>&nbsp; &nbsp; &nbsp; <option value="media/analyst">Media/Analyst</option>&nbsp; &nbsp; &nbsp; <option value="university">University</option>&nbsp; &nbsp; &nbsp; <option value="nxp">NXP</option>&nbsp; &nbsp; </select>&nbsp; </div></template><script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; category: null&nbsp; &nbsp; };&nbsp; }};</script>

Answer 2

您应该将value道具添加到您的组件中：<div class="select-wrapper">&nbsp; <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">&nbsp; &nbsp; &nbsp; <option value="" selected="selected">Category*</option>&nbsp; &nbsp; &nbsp; <option value="attendee">Attendee</option>&nbsp; &nbsp; &nbsp; <option value="distributor">Distributor</option>&nbsp; &nbsp; &nbsp; <option value="sponsor">Sponsor</option>&nbsp; &nbsp; &nbsp; <option value="media/analyst">Media/Analyst</option>&nbsp; &nbsp; &nbsp; <option value="university">University</option>&nbsp; &nbsp; &nbsp; <option value="other">Other</option>&nbsp; </select>&nbsp;</div><script>export default {&nbsp;props:value};</script>并在父组件中使用它，例如：<my-select v-model="category"/>...<script>export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; category: ''&nbsp; &nbsp; };&nbsp; }};</script>