如果输入类型属性是复选框，我如何绑定一个类？ + Vuejs

Question

我的 .vue 模板中有以下代码行用于输入字段组件，我想检查输入字段是否为复选框，如果为真，则在输入字段上绑定一个类。

在组件中它看起来像这样：

<input :type="type" class="o-pf-input" :class="!isCheckbox ? 'o-pf-input--cbx' : ''" :placeholder="placeholder" :name="placeholder" :value = 'value' @input="value = $event.target.value">

它在哪里:class="!isCheckbox ? 'o-pf-input--cbx' : ''"

在我的数据选项中，我有这个：

data: function() {
    return {
        value: '',
        checkbox: 'o-pf-input--cbx',
        isCheckbox: false
    }
},

所以它是一种工作，但它将类应用于所有输入字段，这是我不想实现的。 只有当属性类型是复选框时，它才应该添加类。

Answer 1

我猜type是道具？ 我会将逻辑移动到计算属性并检查type是否为复选框：

computed: {
  checkboxClass: function () {
    return this.type === 'checkbox' ? 'o-pf-input--cbx' : ''
  }
}

然后使用它：

<input :type="type" class="o-pf-input" :class="checkboxClass" :placeholder="placeholder" :name="placeholder" :value = 'value' @input="value = $event.target.value">

您可以在此处阅读有关计算属性的更多信息： https ://v2.vuejs.org/v2/guide/computed.html

如果type未知，您可能必须获取对实际元素的引用并手动检查类型。 请参阅此处以获取有关参考的参考： https ://v2.vuejs.org/v2/api/#ref

Answer 2

首先，尝试摆脱双重类规范。 将您的静态类作为文字放在绑定类中，即:class="['type',!isCheckbox...]" 。 如果这变得复杂，请将其删除到methods中的特定函数中。

接下来，你为什么不测试type变量而不是 isCheckbox 属性，所以有一个事实来源。

接下来，如果您想将不同的输入传递给同一组件的不同实例，您将需要使用props ，而不是data 。 所有实例的数据都相同。

最后，您确定要将复选框和其他输入放在一个组件中吗？ 他们有什么共同点？ 这看起来有点像将披萨切成矩形。