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

时间:2018-04-03 02:02:43

标签: vue.js vuejs2

我会直截了当地说到这一点。我正在使用它的单元循环遍历项目..我希望单元的选项具有基于is_base_unit的选定选项。然而,似乎没有用。

基于代码和图像,Unit2应该是默认值,因为该选项的is_base_unit设置为true。我不确定这有什么问题。我在这里先向您的帮助表示感谢。 https://github.com/GoogleChrome/custom-tabs-client/blob/master/customtabs/src/android/support/customtabs/CustomTabsIntent.java#L371

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

1 个答案:

答案 0 :(得分:1)

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

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