$refs should be reactive to be able to use them in computed properties

[TheDutchCoder]

Now that refs are no longer reactive, we need to emit events and payloads from child components.
This is fine and works well, but it becomes hard to maintain in the following scenario:

When you create a custom form input component, that basically wraps an input into it's own re-usable component, we can no longer access the input's value (and other props) reactively in e.g. a computed prop in the parent.

Take the following use-case:

<my-input ref="email"></my-input>
<my-input ref="password"></my-input>
<p>This is {{ isValid ? 'valid' : 'invalid' }}</p>

Previously we could create a computed prop like this:

isValid() {
  return this.$refs.email.isValid && this.$refs.password.isValid
}

Since refs don't work reactively anymore, we now need to use $emit to inform the parent of changes.
However, these emits are handled by methods, so we need a separate handler per input to deal with the events.

Something like:

<my-input @valid="handleValidEmail"></my-input>
<my-input @valid="handleValidPassword"></my-input>

handleValidEmail(value) {
  this.email = value
  this.emailIsValid = true
},

handleValidPassword(value) {
  this.password = value
  this.passwordIsValid = false
}

You could refactor this a bit, but it's not a nice way of dealing with this and I'm assuming using forms is quite a common occurence for a lot of devs.

Can we think about a better solution to something like this?

[fnlctrl]

How about using one handler with multiple parameters?

<my-input @valid="handleValid"></my-input>
<my-input @valid="handleValid"></my-input>

handleValid(value, type) {
  this[type]= value
  this[type + 'Valid'] = true
},

inside components:

this.$emit('valid', value, 'email')
...

this.$emit('valid', value, 'password')

[TheDutchCoder]

Because you can have multiple of the same type of fields.
Maybe I could use their ID's in that case instead?

[itsMapleLeaf]

Try something like this:

<template>
  <form>
    <my-input v-model='fields.email'></my-input>
    <my-input v-model='fields.password'></my-input>
    <p>This is {{ isValid ? 'valid' : 'invalid' }}</p>
  </form>
</template>

<script>
export default {
  data () {
    return {
      fields: {
        email: { value: '', valid: false },
        password: { value: '', valid: false },
      }
    }
  },
  computed: {
    isValid () {
      return Object.values(this.fields).every(field => field.valid)
    }
  }
}
</script>

Where the input components v-model both the value of the input, and the validity status.

[TheDutchCoder]

So this is where I get confused.
How does the model update the valid part? I thought it only update the value?

this.$emit({
  value: event.target.value,
  valid: someValidationMethod(this)
})

Or something?
If that works it would be good (certainly not great).

The main issue I have with this, is that I need all those fields in my state, whereas previously I didn't, because I could just use the refs.

Having them in my state is a pretty major pain in the ass, because it clutters my state without a good reason.

[LinusBorg]

The main issue I have with this, is that I need all those fields in my state, whereas previously I didn't, because I could just use the refs.

@TheDutchCoder This is inconvenient indeed. :(

@yyx990803 Do you have something in mind for situations like these?

[TheDutchCoder]

Just to add some context, this is what I could do previously:

computed: {
  isReady() {
    return this.$refs.email.isValid && this.$refs.password.isValid
  }
}

But now I need to add additional state and a handler to deal with this:

data() {
  return {
    email: { value: '', isValid: false },
    password: { value: '', isValid: false }
  }
}

// Some method that dynamically handles input changes

// Computed prop
computed: {
  isReady() {
    return this.email.isValid && this.password.isValid
  }
}

Mainly the extra (not very useful) state and the handler are a bit of a pain, would be great if there could be some alternative to what used to be $refs that remain reactive. Not sure what the implications would be and why it was deprecated, I'm just trying to illustrate a use case when the old $refs were very useful.

[LinusBorg]

Would it be ok to rename the issue to something like: "$refs should be reactive to be able to use them in computed properties"?

[TheDutchCoder]

Sure go for it! Thanks for the discussion guys, it;s appreciated.
Vue is an amazing framework and the open conversations around it make it only better ;)

[itsMapleLeaf]

So this is where I get confused.
How does the model update the valid part? I thought it only update the value?

If a component emits an input event while accepting a value prop, v-model will update the value in the parent. So your my-input component would need to do something like this:

<template>
  <input :value='value.value' @input="onInput($event)">
</template>

<script>
...
  props: ['value'],
...
  onInput(event) {
    this.$emit({ value: event.target.value, valid: this.someValidatorFunction() })
  }
...
</script>

I imagine there's a better way, though. Without reactive refs, that is. Perhaps using mixins, somehow...

I'm still for reactive refs, though. It's a super useful thing to have in general.

[TheDutchCoder]

Alright, at least your example works.
Now with the added state, the real issue is the combination with Vuex.

Since the Vuex getters aren't yet available when the state is defined, we can't use them to populate the values.

We could use mounted or something, but again, that's quite dirty.

[TheDutchCoder]

Here's two repos that compare the two scenarios:

Vue1: https://jsfiddle.net/okv0rgrk/8330/
Vue2: http://jsfiddle.net/5sH6A/744/

I hope this clearly illustrates the current problem. The biggest issue right now is the fact that you can't use computed props in the child component anymore. Even this.$nextTick doesn't work in the emit event, because the v-model hasn't updated yet.