Установка флажка, отмеченного флажком Vue.js

Я играю в игры и играю с каждой знакомой мной комбинацией, но я не могу проверить свои флажки, как отмечено.

Пример:

<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
    },
]

Что я могу сделать, чтобы изначально установить проверенные состояния флажков?

Ответы

Ответ 1

Чтобы установить значение флажка, вам нужно привязать v-модель к значению. Флажок будет проверен, если значение правдиво. В этом случае вы выполняете итерацию 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 docs:

<input v-model="something">
- это просто синтаксический сахар для:
<input v-bind:value="something" v-on:input="something = $event.target.value">

Итак, используя v-model и v-bind:value, вы фактически получаете v-bind:value дважды, что может привести к поведению undefined.

Ответ 2

Предположим, вы хотите передать опору дочернему компоненту и что prop - это логическое значение, которое определит, установлен ли флажок или нет, тогда вы должны передать логическое значение в v-bind:checked="booleanValue" или более короткий путь :checked="booleanValue", например:

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

Это должно сработать, и флажок отобразит флажок с его текущим логическим состоянием (если true, если не отмечен).

Ответ 3

У меня были требования к смайлеру, но я не хотел использовать v-model, чтобы иметь состояние в родительском компоненте. Тогда я заставлю это работать.

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

Чтобы передать значение от родителя, я внес в него небольшое изменение, и оно работает.

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