使用 Vue.js 將復選框設置為選中狀態

Question

我一直在谷歌搜索和玩我知道的每一個組合，但我無法讓我的復選框被初始化為選中狀態。

例子：

<ul class="object administrator-checkbox-list">
    <li v-for="module in modules">
        <label v-bind:for="module.id">
            <input type="checkbox" v-model="form.modules" v-bind:value="module.id" v-bind:id="module.id">
            <span>@{{ module.name }}</span>
        </label>
    </li>
</ul>

模塊數據示例：

[
    {
        "id": 1,
        "name": "Business",
        "checked": true
    },
    {
        "id": 2,
        "name": "Business 2",
        "checked": false
    },
]

我可以做些什么來初始設置復選框的選中狀態？

Answer 1

要設置復選框的值，您需要將 v-model 綁定到一個值。 如果值是真實的，復選框將被選中。 在這種情況下，您正在迭代modules ，並且每個module都有一個checked的屬性。

以下代碼將復選框與該屬性綁定：

<input type="checkbox" v-model="module.checked" v-bind:id="module.id">

---

請注意，我刪除了v-bind:value="module.id" 。 你不應該在同一個元素上使用v-model和v-bind:value 。 來自 vue 文檔：

 <input v-model="something">

只是語法糖：

 <input v-bind:value="something" v-on:input="something = $event.target.value">

因此，通過使用v-model和v-bind:value ，您實際上最終會得到v-bind:value兩次，這可能會導致未定義的行為。

Answer 2

假設您想將一個道具傳遞給子組件，並且該道具是一個布爾值，它將確定復選框是否被選中，那么您必須將布爾值傳遞給v-bind:checked="booleanValue"或更短的方法:checked="booleanValue" ，例如：

<input
    id="checkbox"
    type="checkbox"
    :value="checkboxVal"
    :checked="booleanValue"
    v-on:input="checkboxVal = $event.target.value"
/>

這應該可以工作，並且復選框將顯示具有當前布爾狀態的復選框（如果選中，則未選中）。

Answer 3

在 v-model 中，屬性的值可能不是嚴格的布爾值，並且復選框可能不會“識別”該值是選中/未選中。 VueJS 中有一個巧妙的功能可以轉換為 true 或 false：

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

Answer 4

我有類似的要求，但我不想使用v-model在父組件中擁有狀態。 然后我得到了這個工作：

<input
  type="checkbox"
  :checked="checked"
  @input="checked = $event.target.checked"
/>

為了從父級傳遞值，我對此進行了一些小改動，它可以工作。

<input
  type="checkbox"
  :checked="aPropFrom"
  @input="$emit('update:aPropFrom', $event.target.checked)"
/>

Answer 5

 <input v-if = "module.checked == true" checked type="checkbox" > <input v-else-if = "module.checked == false" type="checkbox" >

我已經使用 v-if 和 v-else-if 解決了這個問題

Answer 6

我遇到了這個問題並且在幾個小時內無法找到解決方法，直到我意識到我錯誤地prevented本地事件的發生：

<input type="checkbox" @click.prevent="toggleConfirmedStatus(render.uuid)"
    :checked="confirmed.indexOf(render.uuid) > -1"
    :value="render.uuid"
/>

從@click處理程序中刪除.prevent解決了我的問題。

Answer 7

我同時使用隱藏和復選框類型輸入來確保將 0 或 1 提交到表單。 確保字段名稱相同，因此只有一個輸入將發送到服務器。

<input type="hidden" :name="fieldName" value="0">
<input type="checkbox" :name="fieldName" value="1" :checked="checked">

Answer 8

就我而言，我有一個簡單的布爾類型，所以我所做的是：

在我的 html 中： <input type="checkbox" :checked="article.is_public" :value="article.is_public" @change="updateIsPublic($event.target.checked)">

methods: {
  updateIsPublic (e) {
      this.$store.commit('articles/UPDATE_IS_PUBLIC', e);
    },
}

店鋪

 UPDATE_IS_PUBLIC(state, value) {
    state.article.is_public = value;
  }

Answer 9

對於 bootstrap vue，如果 value 為“1”，則 value="1" 和“0” unchecked-value="0"