How select first option by default
Hello,
I try to make Daily selected but it's not working !
<select class="form-control" id="inputRepeatTask" v-model="newTask.repeat">
<option value = "Daily" selected>Daily</option>
<option value = "Weekly">Weekly</option>
<option value = "Monthly">Monthly</option>
</select>
Add a default value to your newTask.repeat to be equal to Daily.
@nakov , how to do if I woulf like to add selected option without value to ask user to select option :
<option selected>Please select ...</option>
Thanks
@mostafalaravel just add a value="-1" for example but in your Vue component set the default value to be -1 as well.
Because you bind the select to Vue data, the html select is immediately overwritten by Vue's opinion of what should be selected.
You can use the onMounted hook to set the default value. For example:
<script setup>
const props = defineProps({
myList: {
type: Object,
required: true,
},
});
const myList = defineModel('myList');
onMounted(() => {
// Set the first default value from the list
myList.value = props.myList[0]?.id
});
</script>
<template>
<select
v-model="myList"
>
<option
v-for="element in props.myList"
:key="element.id"
:value="element.id"
>
{{ element.name }}
</option>
</select>
</template>
Please or to participate in this conversation.