avue 監聽form某一字段值來進行動態顯隱

廢話不多說直接上代碼

<avue-form :option="option" ref="form" v-model="form"></avue-form>
<script>
export default {
  data(){
    return {
       form:{
          text1:0,
       },
       option:{
          column: [{
            label: '內容1',
            prop: 'text1',
            type:'radio',
            dicData:[{
              label:'隱藏',
              value:0
            },{
              label:'顯示',
              value:1,
            }]
          },{
            label: '內容2',
            prop: 'text2',
            display:true,
            rules: [],
          }]
       }
    }
  },
  watch:{
    'form.text1':{
      handler(val){
        var text2 =this.findObject(this.option.column,'text2')
        if(val===0){
          text2.display=true
          text2.rules=[{
            required: true,
            message: "請輸入內容2",
            trigger: "blur"
          }]
        }else{
          text2.display=false
          text2.rules=[]
        }
      },
      immediate: true
    },
  }
}
</script>

avue更新到最新版使用此方法