Vue.js - 요소 UI - 동적 규칙 검증 양식

Vue.js - 요소 UI - 동적 규칙 검증 양식

사용하고 있다vue-js2.3그리고.element-ui.

폼의 유효성 검사 규칙을 동적으로 정의하고 싶다.

예

https://jsfiddle.net/cgL6y9kq/

문제

그required는 에 의해 동적으로 정의되지 않습니다.phoneMandatory

문의사항

기존 규칙의 속성을 동적으로 변경하려면 어떻게 해야 합니까?규칙을 동적으로 추가 또는 삭제하려면 어떻게 해야 합니까?

네, 있습니다.rules컴포넌트의 속성data방법.즉, 다른 데이터 속성 변경에 따라 업데이트되지 않습니다.

다음에 대해 계산된 속성을 사용해야 합니다.rules대신:

computed: {
  rules() {
    return { 
      phone: [{ 
        required: this.phoneMandatory, 
        message: 'Please input phone', 
        trigger: 'blur' 
      }]
    }
  }
},

자, 그럼.this.phoneMandatory컴포넌트의 업데이트도rules소유물.

여기 작동하는 바이올린이 있습니다.

언급URL : https://stackoverflow.com/questions/44398087/vue-js-element-ui-dynamic-rules-validation-form