Set default selection option with props-CodePudding

I'm having some trouble setting a default value I have tried the following: add selected in an option

<option value="1" selected>option A</option>

This did not work, below is an example of my code

<template>
  <div>
    <div>

      <div >
        <label
          for="outside_state"
          
        >
          Option List
        </label>
        <div >
          <select
          v-model="selector.options"
            id="outside_state"
            name="outside_state"
            
          >
            <option value="1">Value A</option>
            <option value="1">Value B</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['selector'],
};
</script>

How could I set Value A as a default value?
Now when the page loads nothing is selected.

CodePudding user response：

You can set default value for props if the props is not being passed it will automatically get that value.

props:{
 selector: {
        type: Object,
        default: () => ({ options: 1 })
    }
}

You can read more about props here:

https://vuejs.org/v2/guide/components-props.html#Prop-Types