我正在使用Vue.js 3和脚本设置。
这是在我的模板:
<select v-model="selectedStatus">
<option
v-for="option in statusOptions"
:value="option.status"
:selected="status == option.status || (status === null && option.status === '')">
{{ option.label }}
</option>
</select>
在脚本设置中,我有以下定义:
const props = defineProps(['status']);
const selectedStatus = ref(props.status);
const statusOptions = [
{ status: '', label: 'Any' },
{ status: 'error', label: 'Only Error' },
{ status: 'success', label: 'Only Success' }
];
我可以使用VueDevtools确认prop status
为空,当我在:selected=..
上添加一个console.log
时,我可以看到它在第一次迭代中实际返回true。
但是,选择框没有预先选择“任何”。我错过了什么?
这是它在检查器中的样子:
2条答案
按热度按时间q9rjltbz1#
这是因为如果
<select>
元素上有一个v-model
,那么:selected
属性是无用的,因为它具有“初始选定值”的优先级。因为
status
等于null
,option.status
等于''
,所以vue不认为它们相等,因此不预先选择“任何”。因此,这里唯一的解决方案是确保
selectedOption
转换为''
,如果它是null
:xlpyo6sf2#
尝试将"任意"的状态值设置为空: