鍍金池/ 問答/HTML/ Vue Element-ui form驗(yàn)證 + vue子組件, mounted

Vue Element-ui form驗(yàn)證 + vue子組件, mounted 可以正常傳入object,但無法通過校驗(yàn)

自定義組件,子組件, 設(shè)定 value.name 為必須項(xiàng):

<template>
  <div>
    <el-form>
      <el-form-item prop="name" label="名稱" :rules="[{ required: true, message: '請(qǐng)輸入名稱'}]">
        <el-input v-model="value.name"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object
    }
  },
  data () {
    return {}
  }
}


</script>

父組件,調(diào)用兩個(gè)子組件, 但是值的初始化階段不一樣, data()中定義的bean1工作正常, mounted () 設(shè)定的bean2工作不正常,不能通過子組件的校驗(yàn):

<template>
  <div class="wrapper">
    <div><b> TEST PAGE</b></div>
    <div>
      <bb-son v-model="bean1"/>
      <bb-son v-model="bean2"/>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bean1: {
        name: 'name1'  //works fine
      },
      bean2: {}
    }
  },
  methods: {
  },
  mounted: function () {
    this.bean2 = {
      name: 'name2'
    }
  }
}
</script>

訪問父組件結(jié)果(值已經(jīng)傳遞到子組件,且已經(jīng)顯示出來, 但卻沒通過子組件驗(yàn)證):

clipboard.png

查看sonsole, 發(fā)現(xiàn)是在父組件 mounted時(shí)出的問題。
mounted 時(shí)設(shè)置 bean2.name = 'anyname', 子組件會(huì)把值顯示上去,但是會(huì)導(dǎo)致驗(yàn)證失敗。
console如下(可以看到在父組件data中name1, name2都能正常傳播到子組件,在父組件mounted之后,去修改子組件name, 子組件驗(yàn)證失?。?/p>

clipboard.png

回答
編輯回答
菊外人

1、bean2: {name:''}

2、{ required: true, message: '請(qǐng)輸入名稱', trigger: 'change'}

2017年8月13日 05:03
編輯回答
雅痞

上面我編輯了下,添加了些信息,請(qǐng)?jiān)倏聪隆?/p>

2017年1月26日 19:03