[英]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.