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.)

Answer 1

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