vue 两个文本框只允许一个输入

今天项目中又一个需求就是两个文本框只允许一个输入，因为也是初学vue，这个功能也没有实现过，急了半天才解决。。。

言归正传：现在有两个文本框

<label class="m-t-10 m-l-10 pull-left">电脑：</label>
      <div class="col-md-3">
      <input type="text"  v-model="computer" class="form-control" placeholder="电脑" v-bind:readonly="pMobile">
 </div>
<label class="m-t-10 m-l-10 pull-left">手机:</label>
      <div class="col-md-3">
      <input type="text"  v-model="mobile" class="form-control" placeholder="手机" v-bind:readonly="mPassport">
      </div>

我是通过v-bind:readonly="flag"来控制它们是否只读，起初都设为false，意味着不是“readonly”，在watch中通过v-model来监控这两个文本框值，如果一个框输入了文本，它的长度就会发生变化，变为大于0，这时把另一个文本框的flag设为true，另一个框就变成了只读的，如果它的文本长度重新变为0，就把另一个的值置为false,又变为了可读可写。deep:true,意为深度监视，只要值发生了变化，就响应。下面上代码：

watch:{
    computer: {
      deep: true,
      handler: function (val) {
        if (val.length > 0) {
          this.mPassport = true
        } else {
          this.mPassport = false
        }
      }
    },
    mobile: {
      deep: true,
      handler: function (val) {
        if (val.length > 0) {
          this.pMobile = true
        } else {
          this.pMobile = false
        }
      }
    },
 ......
}

需要注意的是这两个flag需要在data中声明，并赋初值为false。

data () {
    return {
      pMobile: false,
      mPassport: false
    }
  },