Vue/vuetify v-switch: what is input-value?

Question

Can someone explain to me exactly what the input-value attribute does on the v-switch component?

I think it has something to due with using the component with vuex, when you cannot use v-model directly.

It seems to be working for me, but I don't understand it exactly.

You can see the attribute here: https://vuetifyjs.com/en/components/selection-controls#api

Where it is described as: "The v-model bound value".

(I originally found the attribute in an example somehere.)

check [Vuetify Github](https://github.com/vuetifyjs/vuetify/blob/dev/src/mixins/selectable.js#L45) — Sphinx, Jul 23 '18 at 18:46
@Sphinx That was a good idea. I can see now that input-value abstracts the component state to a watch value. But why? Why is input-value working and `value` isn't? — mtyson, Jul 23 '18 at 18:53
what do you mean "Why is input-value working and value isn't?"? — Sphinx, Jul 23 '18 at 20:25
@Sphinx Why when I bind to `:value` does the component not reflect the value of the binding, but when I bind to `:input-value` it does work? That is not the case for other components except ``. — mtyson, Jul 23 '18 at 21:35
I am not familiar with Vuetify, but from the [source codes](https://github.com/vuetifyjs/vuetify/blob/dev/src/mixins/selectable.js#L139), `input-value` only affect the initial value. then if attr=`value` of checkbox !== `inputValue`, it will return null instead, like [this codepen](https://codepen.io/anon/pen/zLwBMp?editors=1011) — Sphinx, Jul 23 '18 at 22:33
sorry, it seems enclosed wrong codepen, please removed `value="xx"` instead for the codepen of previous comment. — Sphinx, Jul 23 '18 at 22:42

score 23 · Accepted Answer · edited Jul 15 '22 at 19:57

input-value behaves like a default value attribute that you would expect in other components.
Normally v-model is syntax sugar for :value="value" :input="$emit('input', $event.target.value)", but we can change it.

from selectable.js:

model: {
  prop: 'inputValue',
  event: 'change'
},

So the above lines (see vue docs) make your v-model bind to input-value instead of value likely because some components i.e. checkbox (which v-switch uses) have value attribute reserved for something else.

So value attribute is then used to set the value which will be represented when the component is checked.
And in v-switch case v-model is syntax sugar for something like :input-value="value" @change="value = $event"

Codepen

Vue/vuetify v-switch: what is input-value?

1 Answers1

Linked