为了账号安全,请及时绑定邮箱和手机立即绑定

带有选择输入的 Vue v-model

带有选择输入的 Vue v-model

互换的青春 2023-01-06 15:48:05

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


查看完整描述

2 回答

?
暮色呼如

TA贡献1587条经验 获得超9个赞

需要一个道具来绑定所选值并将该道具传递给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>


查看完整回答
反对 回复 2023-01-06
?
慕容708150

TA贡献1589条经验 获得超3个赞

您应该将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>


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 11 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信