VueJS选择的选项属性不起作用

Question

我在这里直奔主题。我正在循环使用它的单元的项目。我希望单元的选项具有基于is_base_unit 的选定选项。但是，似乎不起作用。

根据代码和图像，Unit2 应该是默认值，因为该选项的 is_base_unit 设置为 true。我不确定这有什么问题。我在这里先向您的帮助表示感谢。

VUE 代码

<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(){
    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

由于您使用的是v-model="item.unit"，因此选择哪个选项将直接由item.unit 的值控制。

要设置默认值，只需设置item.unit 的初始值即可。