Establecer una casilla de verificación como marcada con Vue.js

He estado buscando en Google y jugando con todas las combinaciones que conozco, pero no puedo hacer que mis casillas de verificación se inicialicen como marcadas.

Ejemplo:

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

Un ejemplo de los datos de los módulos:

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

¿Qué puedo hacer para establecer inicialmente el estado marcado de las casillas de verificación?

Para establecer el estado de la casilla de verificación, debe vincular el modelo v a un valor. La casilla de verificación se marcará si el valor es verdadero. En este caso, está iterando sobre modules y cada module tiene un checked propiedad.

El siguiente código vinculará la casilla de verificación a esa propiedad:

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

Si desea obtener más información sobre cómo funciona v-model en esta situación, aquí hay un enlace a la documentación sobre el enlace de entrada de formulario.

Supongamos que desea pasar un accesorio a un componente secundario y ese accesorio es un booleano que determinará si la casilla de verificación está marcada o no, luego debe pasar el valor booleano al v-bind:checked="booleanValue" o el camino más corto :checked="booleanValue"por ejemplo:

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

Eso debería funcionar y la casilla de verificación mostrará la casilla de verificación con su estado booleano actual (si está marcado como verdadero, si no está sin marcar).

En el modelo v, el valor de la propiedad podría no ser un valor booleano estricto y la casilla de verificación podría no “reconocer” el valor como marcado/sin marcar. Hay una característica interesante en VueJS para hacer la conversión a verdadero o falso:

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

Tenía requisitos similares pero no quería usar v-model tener el estado en el componente principal. Entonces conseguí que esto funcionara:

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

Para transmitir el valor del padre, hice un pequeño cambio en esto y funciona.

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

Experimenté este problema y no pude encontrar una solución durante unas horas, hasta que me di cuenta de que tenía incorrectamente prevented eventos nativos ocurran con:

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

la eliminación de la .prevent desde el @click el controlador solucionó mi problema.

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

He resuelto esto con el uso de v-if y v-else-if

Utilizo tanto la entrada oculta como la casilla de verificación para garantizar que se envíe 0 o 1 al formulario. Asegúrese de que el nombre del campo sea el mismo para que solo se envíe una entrada al servidor.

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