Question

我正在尝试使用Vee Validate来要求两个输入字段之一，名称OR位置，但它们不能都是空的。我收到此错误 - '指令验证错误绑定错误：“TypeError：无法读取未定义的属性'表达式''这是我所拥有的 -

HTML

<div class="col-xs-12 col-sm-8"> 
    <div class="same-height-parent"> 
        <div class="same-height" :class="{'has-error': errors.has('searchLocation') }"> 
            <input type="text" class="form-control" placeholder="Enter Zip or City, ST" v-model="searchLocation" v-validate ="{ rules: { required: this.locationInput} }" data-vv-name="searchLocation" > 
        </div>                                                 
        <div class="form-element same-height">or</div>                                                 
        <div class="same-height" :class="{'has-error': errors.has('searchName') }"> 
            <input type="text" class="form-control" placeholder="Enter Name" v-model="searchName"  v-validate ="{ rules: { required: nameInput} }" data-vv-name="searchName"> 
        </div>                                                 
    </div>                                                                                          
</div>                                         
<div class="col-xs-12 col-sm-4"> 
  <button class="btn btn-success btn-block btn-fz20" 
    @click="validateBeforeSubmit()">Search</button>
</div>

JS

export default {
      name: 'startNewSearch',
      data: function() {
        return {
          sectionTitle: 'Start a New Search',
          sectionClass: 'search',
          searchLocation: '',
          searchName: '',
          searchType: 'location'
        }
      },
      methods: {
        validateBeforeSubmit: function(e) {
          this.$validator.validateAll();
            if (!this.errors.any()) {
              this.submit()
          }
        },
        submit: function(e) {}
    }    
  },
  computed: {
    locationInput() {
        if(this.searchName === '') {
          return true; 
        }
        return false;
    },
    nameInput() {
        if(this.searchLocation === '')
            return true; // cellphone is required
        return false;
    }
  }
}

Answer 1

这是一个古老的问题，但是我在寻找类似问题时遇到了它。

无论如何，我相信您有语法错误。

v-validate ="{ rules: { required: nameInput} }"

...您错过了“这个” ...

v-validate ="{ rules: { required: this.nameInput} }"

此致

韦恩

Answer 2

在vee-validate v3中，我的解决方案是像这样扩展require_if规则：

app.html：

...

<ValidationProvider name="lastName" immediate rules="required_if_not:company" v-slot="{ errors }">
...

app.js：

extend('required_if_not', {
    ...required_if,
    // params: ['target']
    validate: (value, args) => {
        let target_value = args.target;
        return Boolean(target_value || value);
    },
    message: 'Bitte dieses Feld ausfüllen.'
});

这也适用于多个字段。

Vee Validate需要两个字段中的任何一个

2 个答案: