VueValidator.mapValidation with other computed values

[heygambo]

vue & vue-validator version

2.0.3, 3.0.0-alpha.1

how can I use VueValidator.mapValidation with other computed values that I have in the component? I've tried to figure it out but I've got a little bit unsure what it does.

Is it meant to be used like this?

  computed: {
    submitDisabled () {
      return this.sending // || this.$form.invalid
    },

    valid: VueValidator.mapValidation(['$validation.validation1.valid']),

    usernameInvalid: VueValidator.mapValidation(['$validation.validation1.form.subject.invalid']),

    passwordInvalid: VueValidator.mapValidation(['$validation.validation1.form.body.invalid'])
  }

[kazupon]

Thank you of your feedback!!

I think you can avoid the it with the flowing:

const { extend } = Vue.util
const computed = {
  submitDisabled () {
      return this.sending // || this.$form.invalid
    }
}
extend(computed, VueValidator.mapValidation({
    valid: '$validation.validation1.valid',
    usernameInvalid: '$validation.validation1.form.subject.invalid',
    passwordInvalid: '$validation.validation1.form.body.invalid'
})

new Vue({
  computed,
  ...
})

However, This is not very useful. I'll consider the API of convenience. 😉

[aplr]

Hello,

maybe the object spread operator (which is a stage-3 ECMASCript proposal) will help? I'm using it with the vuex map functions and it works great.

[kazupon]

Yep, you can use object spread operator.

[heygambo]

I've just done it that way now:

computed: {
  valid () {
    return this.$validation.validation.valid
  },

  subjectInvalid () {
    return this.$validation.validation.form.subject.invalid
  },

  bodyInvalid () {
    return this.$validation.validation.form.body.invalid
  }
}

I feel like it's easier to read. I just didn't realize I could just do that back when I've asked. Thank you for helping, though!