Vee-validate: FieldBag not working as expected

[aplr]

Hello,

when I try to access the flags of a field using the method accessors, they don't update when their underlying value changes. However, the errorBag does update. Is this behaviour expected, or am I missing something?

computed: {
    testField() {
        // will only be evaluated once and won't update again, always returns initial value
        return this.fields.passed('channel')
    },
    testError() {
        // returns the error or null as expected when the value changes
        return this.errors.first('channel')
    }
}

Regards,
Andreas

[logaretm]

Possibly because the computed properties are not able to pickup the changes in the fieldBag object. Because its contents are objects which is being added and removed which makes it harder for vue to notice. It works if you the methods directly in the HTML like this fiddle.

The errors object however is implemented as a simple array wrapper, which is easy for Vue to pick up any changes done to it, because I'm only using push and splice.

I will look for a solution, Its works well in Vue 1.0 because I'm using $set to notify Vue but I'm not using it properly.

[aplr]

Ok, it seems to work when no Promises are used, but take a look at my fiddle using Promises. The validation is going nuts in this case.

[logaretm]

Seems like the validation result is shifted for some reason, I will look into it.

[logaretm]

Okay if you use the binding syntax it should work: https://jsfiddle.net/xLp2d3dc/4/

Still need to figure out why its not working if not bound.

[hootlex]

Being able to use errors in computed properties or to pass them to a component would be useful.
This way you could create an ErrorComponent where the errors would be styled and displayed appropriately.

For example: <form-error :errorBag="errors" element="user.dog_name" scope="form-3"></form-error>

[codelab-ai]

yeah I can't figure out why the computed property won't update when doing something like

computed: {
    hasSuccess () {
        return this.fields.passed('name')
    }
}

[logaretm]

@webbur I have tried to make them reactive but its pretty hard using methods, unless I use proxies which many people pointed out that they don't have great polyfill support. so feel free to suggest alternative approaches.

[webberwang]

A work around for the time being

On the input:

@input="revalidate()"

The following only works with one field, but it's an idea for a workaround. It can be made into a mixin and used as well

data () {
    hasSuccess: false,
    hasError: false
},
methods: {
    revalidate () {
        this.$validator.validateAll()
            .then(() => {
                // this.fields.passed('name') is updated here
            })
            .catch(() => {
                // this.fields.failed('name') is updated here
            })
    }
}

[logaretm]

The latest commit reworked the flags, they should now be reactive, can be used in the following fashion:

<template>
  <div id='app'>
    <span v-if="isTouched">Field is touched</span>
    <input type="text" name="field" v-validate="'required|min:5'">
    <pre>{{ fields }}</pre>
  </div>
</template>

<script>
export default {
  computed: {
    isTouched() {
      return this.fields.field && this.fields.field.touched;
    }
  }
};
</script>