Question

我有一个按钮，用于加载文件或添加一些文本
加载后将其推入data（）道具
如果他们没有输入，我如何验证该道具

我发现只有一种解决方案-监视数据道具。并在
中设置验证也许存在更美丽的方式？

我尝试使用validateator.verify（）-但它不会从validateAll发送主errorBag中的错误

这是示例

<div id="app">
  <testc></testc>
</div>

<script type="text/x-template" id="test">
<div>
    <input type="text" v-validate="'required'" name="test_vee">
   {{errors.first('test_vee')}}
  <hr>
    <button @click="addRow">Add</button>
    <input type="text" v-model="inputValue" name="test_input"/>
  <hr>
    {{rows}}
  <hr>
  {{errors.first('rows')}}
    <button @click="validateForm">Validate</button>
  </div>
</script>

和脚本

Vue.component('testc', {
  template: '#test',
  data() {
        return {
            inputValue: '',
            rows: []
        }
    },
  watch: {
    rows: {
      handler: function(newVal, oldVal) {
        this.$validator.errors.remove('rows');
        if (this.rows.length < 2) {
          this.$validator.errors.add({
            id: 'rows',
            field: 'rows',
            msg: 'Need 2 rows!',
          });
        }
      }
    }
  },
  methods: {
    addRow: function() {
      this.rows.push(this.inputValue);
      this.inputValue = '';
    },
    validateForm: function(){
       this.$validator.validateAll();
    }
  }
});

Vue.use(VeeValidate);

new Vue({
  el: '#app'
})

https://codepen.io/gelid/pen/YBajER

示例中的第一个输入：默认验证-确定
第二个输入：用于添加项目-不需要验证或具有自我验证（例如，不为空）
在组件的数据中，我有道具行-需要在ajax请求后端进行验证之前保存数据

我如何不用vee-validate

0 个答案: