Javascript 选择输入的Vue v型

我正在尝试将select输入中的任何选项设置为对象中的值。我正试图使用v型模型来实现这一目的，但我不确定如何实现。下面是我到目前为止尝试做的事情

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

类别*
与会者
经销商
赞助商
媒体/分析师
大学
其他

需要一个道具来绑定所选的值并将该道具传递给

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>

类别={{category}
类别*
与会者
经销商
赞助商
媒体/分析师
大学
恩智浦
导出默认值{
数据（）{
返回{
类别：空
};
}
};

---

编辑：

您应该在组件中添加

值

道具：

<script>

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

类别*
与会者
经销商
赞助商
媒体/分析师
大学
其他

导出默认值{
道具：价值
};

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

...
导出默认值{
数据（）{
返回{
类别：“”
};
}
};

是，但数据方法中的类别保持为空。它不会更改为当前启用的选项值。此外，v-model使第一个选项不会显示在选择框中default@albert_anthony6什么意思？它就像在劫掠中一样工作哦，是的，你是对的。这只是我这边的一个打字错误。仍然面临这样一个问题：在用户与选择框交互之前，v-model会导致选择框在默认情况下显示为空。有没有办法解决这个问题？@albert_anthony6将category初始化为空字符串

category:“

，我已经更新了plunker

<script>

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

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

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