Vue3选择选项中的默认值

Question

如何向该模板添加默认值。默认值将是列表中的第一个选项，即"请选择…">

<template #dropDownSelection="{ props }">
<td colspan="1">
<select
id="IvrElementId"
v-model="props.dataItem[props.field]"
@change="inputChanged(props)"
>
<option
v-for="option in findFilterOptions(props.field)"
:key="option.Value"
:value="option.Value"
>
{{ option.Text }}
</option>
</select>
</td>
</template>

这是应答数据

0: {Text: 'Please Select...', Value: '0', Description: null, Selected: false, Active: false, …}
1: {Text: 'Hang Up Start (Default) (Default Page)', Value: '2', Description: null, Selected: false, Active: false, …}
2: {Text: 'Hold Start (Default) (Default Page)', Value: '1', Description: null, Selected: false, Active: false, …}
3: {Text: 'VQ Start (Virtual Queue Page)', Value: '6', Description: null, Selected: false, Active: false, …}

Answer 1

谢谢你，原来我只需要把它包含在我的addRecord方法中。。。

addRecord: function () {
const dataItem = {
inEdit: true,
changed: true,
Active: true,
//0 = Please Select...
CampaignId: 0,
IvrId: 0,
ListId: 0,
TagIds: []

};

Answer 2

要实现这一点，默认值必须与选项标记中的值属性相匹配。这就是为什么我们将selectedOption设置为空

<script setup>
const selectedOption = ref(null);
</script>
<template>
<select name="category" id="category" v-model="selectedOption">
<option :value="null" disabled> Select a category</option>
<option v-for="category in categories" :key="category.id" 
:value="category"> {{ category.name }}</option>
</select>
</template>