Framework7-Vue MediaList with @change handler doesn't work as expected


i have a media-list with some custom css like so:

<f7-list media-list>
    <f7-list-item checkbox @change="updateSelectedItems" v-for="item in items" :key="" :value="" :title="" :subtitle="item.subtitle" name="itemsList">
        <div slot="media" :style="{'background-color': item.rgb}"></div>


data() {
        return {
            selectedItems: []
methods: {
    updateSelectedItems: function() {            
        var self = this;
        self.selectedItems = [];

        this.Dom7('input[name=itemsList]:checked').each( function () {


If i click on a list-item, the checkbox immediately gets unchecked again. So i can only check one checkbox in the whole list. The log shows always an array with only the id of the last item i clicked.

But if i remove the
<div slot="media" :style="{'background-color': item.rgb}"></div>
everything works as expected…

Is there some interference with the event handlers for checkbox list-items?
I could not find any hint, how to get this right.

Thanks in advance!

Things are shouldn’t be done like this in Vue.js. You need to bind checked property, e.g.

    v-for="item in items"
    :checked="selectedItems.indexOf( >= 0"
  methods: {
    updateSelectedItems(e) {
      const checked =;
      const value =;
      if (checked) {
      } else {
        this.selectedItems.splice(this.selectedItems.indexOf(value), 1);