Vue的Missing required prop:"value"问题

在Vue中使用iView UI的Select控件时，发现chrome的console一直出现Missing required prop的报错，还是Vue的在v-model的使用不太熟悉，需要利用数据绑定解决问题。

在Vue中如下使用iView的Select控件，比如在x.vue的component中

<template>
    <div>
        <form v-on:submit.prevent="onSummit">
            <div>
                <label for="selectType">Type</label>
            <Select v-model="update.type" id="selectType">
                <Option>type1</Option>
                <Option>type2</Option>
            </Select>
            </div>
            <div>
                <button type="summit">
                    Summit
                </button>
            </div>
        </form>
    </div>
</template>

<script>
    import {Select, Option} from 'view-design';
    export default {
      name: 'X',
      components: {Select, Option},
      data () {
          return {
            update: {type: ''}  
          };
      },
      methods: {
          onSummit (e) {
              console.log(this.update);
          }
      }
    };
</script>

运行后会出现Missing required prop: “value"报错，如下图

报错的原因主要是因为v-model的绑定不能直接通过把Option手动写在Html中，而是需要修改为如下方式。

<template>
    <div>
        <form v-on:submit.prevent="onSummit">
            <div>
                <label for="selectType">Type</label>
            <Select v-model="update.type" id="selectType">
                <Option v-for="item in option" :value="item.value" :key="item.value">
                	{{ item.label }}
                </Option>
            </Select>
            </div>
            <div>
                <button type="summit">
                    Summit
                </button>
            </div>
        </form>
    </div>
</template>

<script>
    import {Select, Option} from 'view-design';
    export default {
      name: 'X',
      components: {Select, Option},
      data () {
          return {
            update: {type: ''},
            option: [
            	{
            		value: 1,
            		label: 'type1'
            	},
            	{
            		value: 2,
            		label: 'type2'
            	}
            ]
          };
      },
      methods: {
          onSummit (e) {
              console.log(this.update);
          }
      }
    };
</script>

此外，还有几个需要关注的细节点。

上面示例中使用的是iView4.0，所以出了需要npm install view-design –save之外，还需要在main.js中增加如下代码，从而全局可使用iView UI控件

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

另外，Vue的Form的提交需要拦截原有summit事件，否则会发生跳转，这里使用了

<form v-on:submit.prevent="onSummit">