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


#1

Hi,

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="item.id" :value="item.id" :title="item.name" :subtitle="item.subtitle" name="itemsList">
        <div slot="media" :style="{'background-color': item.rgb}"></div>
    </f7-list-item>
</f7-list>

...

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

        this.Dom7('input[name=itemsList]:checked').each( function () {
            self.selectedItems.push(self.Dom7(this).val());
        });      
        console.log(self.selectedItems);      
    },
}

...

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!


#2

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

<template>
  <input
    type="checkbox"
    v-for="item in items"
    :value="item.id"
    :checked="selectedItems.indexOf(item.id) >= 0"
    @change="updateSelectedItems"
  >
</template>
<script>
  ...
  methods: {
    updateSelectedItems(e) {
      const checked = e.target.checked;
      const value = e.target.value;
      if (checked) {
        this.selectedItems.push(value)
      } else {
        this.selectedItems.splice(this.selectedItems.indexOf(value), 1);
      }
    }
  }
</script>