Vue.js - 元素UI - 动态规则验证表单

Question

我正在使用vue-js2.3和element-ui。

我想动态定义表单的验证规则

实施例

https://jsfiddle.net/cgL6y9kq/

问题

required不会动态定义phoneMandatory

问题

如何动态更改现有规则的属性？ 如何动态添加或删除规则？

Answer 1

您在组件的rules方法中拥有data属性。这意味着它不会根据对其他数据属性的更改进行更新。

您应该使用rules的计算属性来代替：

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

现在，当this.phoneMandatory更新时，组件的rules属性也会更新。

Here's a working fiddle.