vue里的一个警告有谁知道呢？

Question

vue里的警告有谁知道是怎么回事，我的数组是这样的

unitList: [
          {
            unit: '副',
            value: 'a'
          },
          {
            unit: '双',
            value: 'b'
          },
          {
            unit: '套',
            value: 'c'
          },
          {
            unit: '支',
            value: 'd'
          },
          {
            unit: '个',
            value: 'e'
          },
          {
            unit: '只',
            value: 'f'
          }
        ],

循环是这样写

<Col span="8">
                  <Select v-model="formValidate.unit" placeholder="请选择" ref="unit">
                    <Option v-for="item in unitList" v-bind:value="item.value">{{item.unit}}</Option>
                  </Select>
                </Col>
                

出现的警告报错如下：谁知道怎么解决？

Answer 1

<Option v-for="(item,index) in unitList" v-bind:value="item.value" :key="index">{{item.unit}}</Option>

Answer 2

给v-for增加:key即可

例如

<Option v-for="(item, key) in unitList" v-bind:value="item.value" :key="key">{{item.unit}}</Option>

Answer 3

<Option v-for="(item, index) in unitList" :key="index" v-bind:value="item.value">{{item.unit}}</Option>
试试这样呢

Answer 4

<Option :key="item.value" v-for="item in unitList" v-bind:value="item.value">{{item.unit}}</Option>
key这个配置项也填写上去，就不会抱警告了，具体原因见https://cn.vuejs.org/v2/api/#key