[英]Vue v-model with select input
我试图在我的 select 输入中设置任何选项,以将其设置为 object 中的值。 我正在尝试为此目的使用 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>
需要一个道具来绑定选定的值并将该道具传递给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>
编辑: 笨蛋
您应该向组件添加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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.