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!