Hi,
im using f7-v4.5 with vue.
Im trying to create a smart select with max length = 3 and virtual list.
it works fine until you select 3 items. then if you scroll down, the next items in the VL are enabled. So i added a renderItem fnc;
renderItem (item, index) {
let disabled = this.ssNames.getValue().length === parseInt(this.ssNames.maxLength)
item.disabled = disabled
return `
<li class="${disabled ? 'disabled' : ''}">
<label class="item-checkbox item-content">
<input type="checkbox" name="${item.inputName}" value="${item.value}">
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">${item.text}</div>
</div>
</label>
</li>
`
}
but now the problem is, that if i unselect an item the portion of my VL gets enabled, as it should, but if you scroll up or down the next portion is disabled. And now renderItem fnc its not called.
Any advice on how to achieve this?
i made a small fiddle with my code;
jsfiddle
and my ss create full code
this.ssNames = vm.smartSelect.create({
el: '.test-smart-select',
openIn: 'popup',
virtualList: true,
virtualListHeight: 44,
renderItem: (item, index) => {
let disabled = this.ssNames.getValue().length === parseInt(this.ssNames.maxLength)
item.disabled = disabled
return `
<li class="${disabled ? 'disabled' : ''}">
<label class="item-checkbox item-content">
<input type="checkbox" name="${item.inputName}" value="${item.value}">
<i class="icon icon-checkbox"></i>
<div class="item-inner">
<div class="item-title">${item.text}</div>
</div>
</label>
</li>
`
}
})