Javascript VueJS验证：单击；加上「；按钮引导字段获取值

)

我有一个关于表单验证的问题

这是我的表格：

<form class = "uk-form-row" v-validator="formTax"@submit.prevent = "add | valid">
    <div class="uk-grid">
        <div class="uk-width-1-4">
            <select class = "uk-form-small" name="countrycode" v-model = "newTax.countrycode" v-validate:required>
                <option v-for = "country in countries" value = "{{ $key }}" :disabled = "vatMatch($key)">
                    {{country}}
                </option>
            </select>    
            <p class="uk-form-help-block uk-text-danger" v-show="formTax.countrycode.invalid">{{ 'Field cannot be blank.' | trans }}</p>        
        </div>

        <div class="uk-width-1-4">
            <input class = "uk-input-large" type = "number"
                   placeholder = "{{ 'Companies' | trans }}" name="companies" v-model = "newTax.companies" number v-validate:required>
                   <p class="uk-form-help-block uk-text-danger" v-show="formTax.companies.invalid">{{ 'Field cannot be blank.' | trans }}</p>

        </div>
        <div class="uk-width-1-4">
            <input class = "uk-input-large" type = "number"
                   placeholder = "{{ 'Individuals' | trans }}" name="individuals" v-model = "newTax.individuals"
                   number v-validate:required>
                   <p class="uk-form-help-block uk-text-danger" v-show="formTax.individuals.invalid">{{ 'Field cannot be blank.' | trans }}</p>

        </div>     
        <div class="uk-width-1-4">           
            <span class = "uk-align-right"> <button class = "uk-button" @click = "add | valid">{{ 'Add' | trans }}</button></span>            
        </div>
    </div>
</form>

这已经很好用了——但是如果我选择一个国家，将税收字段留空，然后再次单击“添加”，第一个字段将填充“0”，第二次单击后，第二个字段将填充“0”，添加按钮将工作。如果验证失败，为什么验证规则设置为“0”？

---

我创建了一个小gif来演示我的意思：

问题在于添加方法。使用

if（！this.newTax）

验证

newTax

对象时，它将返回true。即使对象属性为空，对象也存在。创建意外行为

您应该验证所需的每个属性，例如，如果您需要

countrycode

和

公司

，请将验证更改为：

if (!this.newTax.countrycode || !this.newTax.companies) return;

此外，当您尝试重置

nexTax

对象时也会出现问题。您需要传入一个干净的对象，但您正在使用空指令重新分配它

请尝试以下添加方法：

add: function (e) {
            e.preventDefault();

    if (!this.newTax.countrycode || !this.newTax.companies || !this.newTax.indiduals) return;

     this.config.vat.push({
         countrycode: this.newTax.countrycode,
         companies: this.newTax.companies,
         individuals: this.newTax.individuals,
      );

      this.newTax = {
          contrycode = '',
          companies = '',
          individuals = ''
      };
}

---

请发布您的Vue/javascript代码。我添加了Vue-sourcecode.Hm，非常感谢。我现在正在使用，但它也不起作用。还是我误解了你说的话。首先，请记住

如果（！this.newTax.countrycode | | |！this.newTax.countrycode）

与

相同，如果（！this.newTax.countrycode）

，则您正在复制支票。您可以使用或

| |

在一个语句中检查then all in。关于仍在发生的错误，您从哪里获取

$data

？请把它寄出去。谢谢你的耐心。如果（！this.newTax | | |！this.newTax.countrycode | | this.newTax.companys | | this.newTax.personals）返回，我将检查更正为

但没有成功。$数据来自Pagekit的PHP控制器-请看这里：您可以单独使用HTML，通过使用输入类型number来实现这一点。例如：

add: function (e) {
            e.preventDefault();

    if (!this.newTax.countrycode || !this.newTax.companies || !this.newTax.indiduals) return;

     this.config.vat.push({
         countrycode: this.newTax.countrycode,
         companies: this.newTax.companies,
         individuals: this.newTax.individuals,
      );

      this.newTax = {
          contrycode = '',
          companies = '',
          individuals = ''
      };
}