Checkbox Vue Component
Checkbox Vue component represents Checkbox component.
Checkbox Components
There are following components included:
- f7-checkbox
Checkbox Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| <f7-checkbox> properties | |||
| checked | boolean | Defines whether the checkbox input is checked or not | |
| indeterminate | boolean | Defines whether the checkbox input is in indeterminate state or not | |
| name | string number |
Checkbox input name | |
| value | string number boolean |
Checkbox input value | |
| disabled | boolean | Defines whether the checkbox input is disabled | |
| readonly | boolean | Defines whether the checkbox input is readonly | |
Checkbox Events
| Event | Description |
|---|---|
| <f7-checkbox> events | |
| change | Event will be triggered when checkbox state changed |
Checkboxes List
Checkboxes List is not a separate component, but just a particular case of using <f7-list> , <f7-list-item> .
Экспорт VueJS-rendered HTML с checkbox не позволяет сохранить проверенное состояние
Мой шаблон компонента содержит следующий код checkbox:
(части удалены для простоты).
Мне нужно создать PDF из этого шаблона (на сервере). Вот что я делаю в коде:
Однако сохраненный HTML не содержит состояния checkbox, поэтому он всегда сохраняет непроверенный checkbox.
Вот немного измененный jsfiddle .
Мой вопрос таков: как я могу захватить состояние checkbox в визуализированном HTML?
Я попробовал добавить :checked=»cbvalue» prop — безуспешно
1 ответ
Похоже, что нет никакого способа привязать атрибут checked ввода; Vue делает все через свойство. (Для справки, свойство-это внутреннее состояние, атрибут-это то, что отображается в HTML.)
Vue two way data-binding in custom checkbox
When writing vue application, you’ll probably come across a situation where you need to write custom input components, and therefore leverage the two way data binding functionality.
A simple custom text input is easiy achievable and it’s documented here
But there’s a different approach to achieve the same two way data binding functionality in custom checkbox components.
Creating the custom checkbox component
Let’s start creating our component. It will be as simple as just rendering the checkbox and a label can be set through props.
Checkbox.vue
Exit fullscreen mode
Now, take a look at this part:
Exit fullscreen mode
We are defining a checkbox input, and binding the value attribute to our inputValue , which will simply be used to determine the input’s value for a form submission for example, just like you would do with normal html
Exit fullscreen mode
Now, v-model is bound to a property called model which is a computed property:
Exit fullscreen mode
The getter for this property will simply return value to v-model and when the data has to be updated, through the setter, we emit the input event, to let the part of the application that’s using this custom checkbox component, that the value has been updated.
It’s important to note that the value property was declared as being an array, since each time we mark a new checkbox, this checkbox value will be pushed to this array bound to v-model property.
Using the component
Now that we have defined how our component will work, we can use it in an example and see if it wil work.
I’ll just define a simple Vue component that will use this checkbox component we just created:
Home.vue
Exit fullscreen mode
In this example, we have three checkboxes component in use, with three different value for each one of them: react, vue and angular with their respective labels.
Exit fullscreen mode
We are binding the v-model property to selectedOptions reactive data property of our home component, which wil be an array.
To make sure that we are updating this selectedOptions each time a check or uncheck an input, I added a simple loop, to render each value in selectedOptions array:
Exit fullscreen mode
Nothing selected: 
All selected: 
Two selected: 