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属性也将如此.

这是一个工作小提琴.