'Vue3 default value in select options

how would I add a default value to this template. the default value would be the first option in the list which is 'Please Select...'

  <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>

this is the response.data

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, …}

Solution 1:^[1]

Thanks for this, turns out I just needed to include this on my addRecord method...

    addRecord: function () {

        const dataItem = {
            inEdit: true,
            changed: true,
            Active: true,
            //0 = Please Select...
            CampaignId: 0,
            IvrId: 0,
            ListId: 0,
            TagIds: []
            
        };

Solution 2:^[2]

To achieve this the default value has to match a value attribute in your option tag. That's why we are setting the selectedOption to null

<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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Steven Collins
Solution 2	Ejiro Asiuwhu

'Vue3 default value in select options

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]