v-model with custom radio component replace onChange event

[clegendre]

Hello,

I'm writing a data-driven custom component that renders different input types from its data.
This component supports types like radio / checkbox / textarea etc.

All these types works fine with v-model directive on the component except of the radio type.

I found why: Vue2 hooks up the onChange event by adding :
'onChange': function(event){ myProp = undefined }

The component looks like this:

<dyn-component type="radio" ... ></dyn-component>

and renders something like this:

<div class="form-group">
  <label><input type="radio" /></label> 
  <label><input type="radio" /></label>
</div>

In fact, Vue2 considers that my component is an input type="radio" but this component renders internaly a radio-button list...

The workaround I used is to change the type from radio to radio-list, but maybe Vue should also check the tag name to be input in addition to the type="radio" attribute check.

[LinusBorg]

I don't understand the problem exactly, can you provide a replication or at least the actual code (the relevant part)?

I found why: Vue2 hooks up the onChange event by adding :
'onChange': function(event){ myProp = undefined }

This does not tell us much. Vue generally does not set your prop to undefined, so it must have something to do with how you make the v-model aproach work.

[clegendre]

Repro here: https://jsfiddle.net/4953qkkz/

Try changing radio with radio-list or anything else but radio, it works.

[LinusBorg]

Thanks. This indeed seems like a bug. The $emitted input event is not correctly received by v-model on the component...

[clegendre]

When you look at the generated render function of the component, the change event looks like:

_h('ck-form-group-input', {
        attrs: {
          ...
        },
        domProps: {
          ...
        },
        on: {
          "input": compute,
          "change": function($event) {
            typeProdChaleur = undefined
          }
        }
      }) 

The bug is here:
typeProdChaleur = undefined

Maybe it is a normal behavior for an input type="radio", but for another component, it is not.

[petejohanson]

With this change, some work I was doing on vue-mdl now won't work. In particular, for things like md-switch which behave like I would like the exposed properties to match what is expected, e.g.:

<mdl-switch v-model="checked" :value="Blue"></mdl-switch

And as I workaround, I was able to do the following:

<mdl-switch type="checkbox" v-model="checked" :value="Blue"></mdl-switch

And get the v-model working as expected with "checked" on the component, not value. With the change committed, this will no longer work. By all means, if there's some other solution for using v-model with a property other than "value", I'm all for it, but right now, there's no way with the last change.

Thoughts?

PS: The in progress vue-mdl code I had working against vue-2.0.0-rc.3 is here: https://github.com/petejohanson/vue-mdl/tree/ftr_v2

[posva]

@petejohanson That's something we should look on vue-mdl end, not here 😄