Element: 当绑定空的验证对象时, 会导致el-input组件输入框无法输入,将其type设置为textarea又可以

[cycold]

ElementUI version

1.0.0

OS/Browers version

macOS/Chrome 53

Vue version

2.0.0

Reproduction Link

具体见:
http://codepen.io/cycold/pen/woGGgr

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-default/index.css">

<div id="app">
<el-form :model="model" :rules="rules" ref="form" style="width: 500px;">
  <el-form-item label="公司名称" label-width="90px" prop="companyName">
    <el-input :maxlength="11" placeholder="请输入公司名(不能输入)" v-model="model.companyName"></el-input>  
    <!--  此处不能进行输入 但是只要将type改成 textarea 又可以输入了    -->
  </el-form-item>

  <el-form-item label="公司名称" label-width="90px" prop="companyName2">
    <el-row type="flex">
      <el-col :span="24">
        <el-input placeholder="请输入公司名" v-model="model.companyName2"></el-input>
        <!--  当不是直接子组件时,正常的    -->
      </el-col>
      <el-col :span="0" style="width: 150px; margin-left: 10px;"><el-button>选择已有公司</el-button></el-col>
    </el-row>
  </el-form-item>

  <el-form-item label="公司名称" label-width="90px" prop="companyName3"> 
    <el-input :maxlength="11" placeholder="请输入公司名" v-model="model.companyName3"type="textarea"></el-input> 
  </el-form-item>
 </el-form>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>


var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    model: {},
    rules: {
      companyName: [{ 
        type: 'string', required: true, message: '请输入公司名称'
      }],
      companyName2: [{ 
        type: 'string', required: true, message: '请输入公司名称'
      }],
      companyName3: [{ 
        type: 'string', required: true, message: '请输入公司名称'
      }],
    }
  }
})

[furybean]

用法有点问题，目前版本的 model 不能赋值一个空对象，否则 vue 没办法对这个属性进行 hook。我改了一下，目前可以了：http://codepen.io/anon/pen/xRVqrJ

[cycold]

是这样的, 有时一个组件会接受一个model对象引用类型属性, 目的就是在这个组件里面修改其属性;

可能就是几个组件共用一个mode表单对象的不同字段(这个对象字段比较多,分成几个组件进行修改,然后提交), 虽然可以在每一个组件里面预定义好字段, 然后再extend/assign进去(传进来属性不能修改,这里只能遍历逐个修改)(或者使用事件emit出去). 但是总觉得直接使用传进来的对象最简单直接了

但是我发现上面也是可以使用空对象的. 只要在el-input外部在包一个组件即可了.

<el-form-item label="公司电话" label-width="90px" prop="contact"> 
          <el-col :span="24"><el-input :maxlength="11" placeholder="请输入公司电话" v-model="model.contact" :disabled="comEditFlag"></el-input></el-col> 
        </el-form-item>

源码显示: 每一个 el-form-item 组件会new 一个AsyncValidator实例的 同时也会创建一个内部验证的
model对象, 将其el-form-item上的prop属性设置到model对象上去的.
this.fieldValue可能读取的就是undefined当验证对象为空时

var validator = new AsyncValidator(descriptor);
        var model = {};
        model[this.prop] = this.fieldValue;

问题是,为什么type=textarea和外部包一层组件就可以正常验证呢?