Element: 当Select通过:value绑定时，与表单validate验证无法通过

Created on 27 Oct 2016 · 5Comments · Source: ElemeFE/element

ElementUI version
1.0.0-rc.7

OS/Browers version
macOS/Chrome 53

Vue version
2.0.3

示例代码

<template>
  <div class="vue-container">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="活动区域" prop="region">
        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option :label="item.title" :value="item.value" v-for="item in genders"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native.prevent="handleSubmit">立即创建</el-button>
        <el-button @click.native.prevent="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        genders: [{title: '男人', value: 1}, {title: '女人', value: 2}],
        ruleForm: {
          region: '',
          gender: ''
        },
        rules: {
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          gender: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ]
        }
      }
    },
    components: {
    },
    methods: {
      handleReset () {
        this.$refs.ruleForm.resetFields()
      },
      handleSubmit (ev) {
        console.log(this.ruleForm)
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            console.log('submit!')
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

log结果
qq20161027-0 2x