element-ui 2.13 对普通对普通元素显示的内容进行验

element-ui 2.13 对普通对普通元素显示的内容进行验证

情景： form表单中有一个特殊的formItem，里面不是form表单元素，而是一个通过监听其他变量获得的字符串，它没办法像input那样触发blur，change事件，导致字符串变化不能进行验证。

代码如下：

<el-form-item label="计算逻辑" prop="logicStr">
          <div class="logic-box">
            <span>{{form.logicStr}}</span>
          </div>
</el-form-item>
...
rules: {
        logicStr: [
          { required: true, message: '请输入正确的计算逻辑', trigger: ['blur', 'change'] }
        ]
}
...
watch: {
    'logicData.logicTextArr': function (newVal) {
      // console.log('logicData.logicTextArr watch:', newVal, val)
      this.form.logicStr = newVal.join('');
    }
  },

...
submitBtn () {
      this.$refs['form'].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
}

点击提交按钮是可以验证的，但是当logicStr发生变化时，不会进行验证。
解决方法 validateField：

watch: {
    'logicData.logicTextArr': function (newVal) {
      // console.log('logicData.logicTextArr watch:', newVal, val)
      this.form.logicStr = newVal.join('');
      this.$refs['form'].validateField('logicStr');
    }
},