Checkbox Vue Component

    Checkbox Properties

    EventDescription
    <f7-checkbox> events
    changeEvent will be triggered when checkbox state changed

    Checkboxes List

    1. <template>
    2.   <f7-page>
    3.    <!-- With boolean value -->
    4.    <f7-checkbox :checked="jobIsDone" @change="jobIsDone = $event.target.checked"></f7-checkbox>
    6.     <!-- With array value -->
    7.     <f7-checkbox
    8.       value="banana"
    9.       :checked="fruits.indexOf('banana') >= 0"
    10.       @change="checkFruits"
    11.     ></f7-checkbox>
    13.     <f7-checkbox
    14.       value="orange"
    15.       @change="checkFruits"
    16.     ></f7-checkbox>
    18.     <f7-checkbox
    19.       value="apple"
    20.       :checked="fruits.indexOf('apple') >= 0"
    21.       @change="checkFruits"
    23.   </f7-page>
    24. </template>
    25. <script>
    26.   export default {
    27.     data() {
    28.       return {
    29.         jobIsDone: false,
    30.         fruits: [],
    31.       };
    32.     },
    33.     methods: {
    34.       checkFruits(event) {
    35.         const self = this;
    36.         const value = event.target.value;
    37.         if (event.target.checked) {
    38.           self.fruits.push(value);
    39.         } else {
    40.           self.fruits.splice(self.fruits.indexOf(value), 1);
    41.         }
    42.       },
    43.     },
    44.   };
    45. </script>

    Examples

    Inline

    Checkbox Group

    1.   <f7-list-item checkbox title="Books" name="demo-checkbox" checked></f7-list-item>
    2.   <f7-list-item checkbox title="Movies" name="demo-checkbox"></f7-list-item>
    3.   <f7-list-item checkbox title="Food" name="demo-checkbox"></f7-list-item>
    5. </f7-list>

    Indeterminate State

    1. export default {
    2.   data: function () {
    3.     return {
    4.       movies: ['Movie 1'],
    5.     };
    6.   },
    7.   methods: {
    8.     onMovieChange: function (e) {
    9.       var self = this;
    10.       var value = e.target.value;
    11.       var movies = self.movies;
    12.       if (e.target.checked) {
    13.         movies.push(value);
    14.       } else {
    15.         movies.splice(movies.indexOf(value), 1);
    16.       }
    17.     },
    18.     onMoviesChange: function (e) {
    19.       var self = this;
    20.       var movies = self.movies;
    21.       if (movies.length === 1 || movies.length === 0) {
    22.         self.movies = ['Movie 1', 'Movie 2'];
    23.       } else if (movies.length === 2) {
    24.         self.movies = [];
    25.       }
    26.     },
    27. };

    With Media Lists