如果輸入類型屬性是復選框，我如何綁定一個類？ + 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 。 所有實例的數據都相同。

最后，您確定要將復選框和其他輸入放在一個組件中嗎？ 他們有什么共同點？ 這看起來有點像將披薩切成矩形。