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

Я играю в Google и вижу все комбинации, которые я знаю, но я не могу инициализировать мои флажки как <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
    },
]

Пример данных модулей:

module

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

javascript,vue.js,

10

Ответов: 2

17 принят

Чтобы установить значение флажка, вам необходимо привязать отмеченное значение к значению. Флажок будет проверен, если значение правдиво. В этом случае вы повторяетесь, и у каждого есть свойство.<input type="checkbox" v-model="module.checked" v-bind:id="module.id">smodulechecked

Следующий код свяжет флажок с этим свойством:

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-modelи v-bind:value, вы на самом деле в итоге получаете v-bind:value два раза , что может привести к неопределенному поведению.

4

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

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

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

javascript, vue.js,
Похожие вопросы
Яндекс.Метрика