matfish2 / vue-formular

a comprehensive vue.js form component
https://www.npmjs.com/package/vue-formular
MIT License
43 stars 11 forks source link

Bind to hasError property of the form #13

Closed peterPgk closed 8 years ago

peterPgk commented 8 years ago

Great plugin, I use it with pleasure :) Can you help me with one problem? Is there a event which fires, when form hasErrors property is changed? I want to bind reactively to this property, so I can change accordingly one property of the parent element.

I have this structure:

<parent>
    <child>
    <vue-formular>

To achieve this I tried to create computed property in parent element

computed: {
    isValid: !this.$refs.form.hasErrors
}

but recieve this error :

Cannot read property '$refs' of undefined

When I do this with getter funtion it seems to work, until I try to bind this property to other child element

<child :valid="isValid">

and then this error is coming:

[Vue warn]: Error when evaluating expression "function get() {
    return this.$refs.form.hasErrors;
} Cannot read property 'hasErrors' of undefined

I tried to use watcher insteed, but with same errors.

Is it posible to bind to hasError property?

matfish2 commented 8 years ago

computed properties should be functions, so instead of

computed: {
    isValid: !this.$refs.form.hasErrors
}

try

computed: {
    isValid: function() {
      return !this.$refs.form.hasErrors
  }
}
peterPgk commented 8 years ago

Thank you for your quick support. This with function is working, but again, when I try to bind isValid to other child component, receive this error while still form is initializing:

vue.common.js?4a36:1019[Vue warn]: Error when evaluating expression "function isValid() {
            return !this.$refs.form.hasErrors;
        }": TypeError: Cannot read property 'hasErrors' of undefined
matfish2 commented 8 years ago

Add an existence check:

computed: {
    isValid: function() {
      return this.$refs.form?!this.$refs.form.hasErrors:true;
  }
}
peterPgk commented 8 years ago

Thank you, I found a similar solution too and it works, but because I use slots to put components inside, the problem continues. Probably the problem is in slots - I found this https://github.com/vuejs/vue/issues/2494 with explanation that they are a bit limited.

Thank you again for your quick help, I will try to construct my components without using slots.