VueJS selected property of option doesn't work

Question

I'm going straight to the point here. I'm looping over the items with it's unit.. I want the option of the units to have a selected option base on is_base_unit. however, doesn't seem to work.

base on the code and on the image the Unit2 should be the default because the is_base_unit of that option is set to true. I'm not really sure what's wrong with this. thanks for the help in advance.

VUE CODE

<tr v-if="items.length > 0" v-for="item in items">
    <td>{{ item.name }}</td>
    <td>{{ item.code }}</td>
    <td>
        <select name="unit" id="unit" v-model="item.unit" >
        <option v-for="unit in item.units" :value="unit.unit_id" :selected="unit.is_base_unit">{{unit.name}} - {{unit.is_base_unit}}</option>
        </select>
    </td>
    <td>
        <select name="" id="" v-model="item.warehouse" >
        <option value="w1" selected>Warehouse1</option>
        <option value="w2">Warehouse2</option>
        <option value="w3">Warehouse3</option>
        </select>
    </td>
</tr>

DATA

data(){
    return{
        items:[
          {
            id:1, name:'item1', code:'code1',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:2, name:'item2', code:'code2',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: true},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: false},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:3, name:'item3', code:'code3',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:4, name:'item4', code:'code4',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:5, name:'item5', code:'code5',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:6, name:'item6', code:'code6',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:7, name:'item7', code:'code7',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:8, name:'item8', code:'code8',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:9, name:'item9', code:'code9',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          },
          {
            id:10, name:'item10', code:'code10',
            units:[
              {unit_id: 1, code:'u1', name:'Unit1', is_base_unit: false},
              {unit_id: 2, code:'u2', name:'Unit2', is_base_unit: true},
              {unit_id: 3, code:'u3', name:'Unit3', is_base_unit: false}
            ]
          }
        ]
    }
}

Answer 1

Since you are using v-model="item.unit", which option is selected would be controlled directly by the value of item.unit.

To set the default value, simply setting the initial value of item.unit would do.