Q:

VueJS Validation: Clicking "add" button leads field to get a value

)
I got a question about validation of forms.
This is my form:
<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>

This is the Vue-Source:
$(function () {

    var vm = new Vue({

        el: '#settings',

        data: {
            config: $data.config,
            roles: $data.roles,
            countries: $data.countries,

            newTax: {
                countrycode: '',
                companies: '',
                individuals: ''
            }
        },

        methods: {

            add: function (e) {

                e.preventDefault();

                if (!this.newTax) return;

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

                this.newTax = '';
            },

            remove: function (vat) {
                this.config.vat.$remove(vat);
            },

            save: function () {
                console.log(this.config.vat);

                this.$http.post('admin/app/save', {entries: this.config}, function () {
                        this.$notify('Settings saved.');
                    }, function (data) {
                        this.$notify(data, 'danger');
                    }
                );
            },

            vatMatch: function (code) {
                return this.config.vat.filter(function (vat) {
                        return vat.countrycode == code;
                    }).length > 0;
            }

        }

    });

});

This already works fine - but if I choose a country and leave the taxes-fields empty and click "add" again, the first field gets filled with "0" and after a second click the second field gets filled with "0" and the add-button works. Why is the validation-rule setting "0" if validation fails?
I created a little gif to demonstrate what I mean: http://d.pr/eRbM

A:

The problem is with your add method. When you validate the newTax object with if (!this.newTax), it will return true. Even if the object properties are empty, the object exists. Creating unexpected behavior.
You should validate each property that is required, for example, if you require countrycode and companies, change your validation to:
if (!this.newTax.countrycode || !this.newTax.companies) return;

Also, there is a problem when you try reset your nexTax object. You need to pass in a clean object, but you are reassigning it with an empty instring.
Try this instead, for your add method:
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 = ''
      };
}

