解决vue中select默认选中为空

js中自定义事件的创建方法和触发今天遇到了一个问题，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示。

我写的原始代码如下：

<select v-model="token">
  <option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option>
</select>

<script>
export default {
  data() {
    return {
        token:'BNB'
        list: {
            1001:'NOW-E68',
            1002:'MITH-C76',
            1003:'SPNDB-916',
            1004:'BNB',
        },
    }
  }

vue中的select通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即代码中的1004，如果不存在，则获取option的文本内容，也就是上面代码中的BNB。
造成默认不显示的原因是v-model获取的token在option的value中匹配不到。因此可以选择去掉option中的value属性或者将v-model中的token值改为list的索引即1004
修改后的代码如下：

<select v-model="token">
  <option v-for="(item,index) in list" :value="index" :key="index">{{item}}</option>
</select>

<script>
export default {
  data() {
    return {
        token:'1004'
        list: {
            1001:'NOW-E68',
            1002:'MITH-C76',
            1003:'SPNDB-916',
            1004:'BNB',
        },
    }
  }

我的个人博客,有空来坐坐