Vue/vuetify v-switch:什么是输入值? [英] Vue/vuetify v-switch: what is input-value?

问题描述

有人可以向我解释一下 input-value 属性在 v-switch 组件上的确切作用吗?

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

当你不能直接使用 v-model 时，我认为它与使用 vuex 的组件有关.

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.

您可以在此处查看该属性:https://vuetifyjs.com/en/components/selection-controls#api

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

它被描述为:v-model 绑定值".

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

(我最初在某处的示例中找到了该属性.)

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

推荐答案

input-value 的行为类似于您期望在其他组件中使用的默认 value 属性.
通常 v-model 是 :value="value" :input="$emit('input', $event.target.value)" 的语法糖，但是我们可以改.

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.

来自selectable.js:

from selectable.js:

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

所以以上几行(见 vue docs) 使您的 v-model 绑定到 input-value 而不是 value 可能是因为某些组件，即复选框(其中 v-switch使用)具有为其他内容保留的 value 属性.

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.

所以 value 属性然后用于设置将在检查组件时表示的值.
在 v-switch 的情况下，v-model 是类似于 :input-value="value" @change="value = $event"<的语法糖/代码>

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:什么是输入值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！