Error refresh method .Elements doubles after that - bootsrap 5 + vue 2

[andryshok]

I use bootsrap 5 + vue 2 .
code html

<select id="sb_select1" name="sb_select_mark" class="selectpicker form-control"  data-live-search="true" data-style="btn-select" data-title="title1">
																				
										<optgroup  label="group1" v-if="items.car_marks_full"> 
											<option v-for="(item, index) in items.car_marks_full" data-car-type="1" :data-car-link="'/cars/'+item" :value="item.id">{{ item.title }}</option>
										</optgroup>	
										
										
										<optgroup label="group2" v-if="items.truck_marks_full"> 
											<option v-for="(item, index) in items.truck_marks_full" data-car-type="2" :data-car-link="'/trucks/'+item" :value="item.id">{{ item.title }}</option>
										</optgroup>
</select>		

after vue rendering html i use method
$('#sb_select1').selectpicker('refresh');

after refreshing items have a doubles, vue get correnct items, but selectpicker('refresh') method not work correctly

[jayb611]

Yes i have faced this issue , fix for that is

Add line at 1780 @ render: funcation
this.selectpicker.main.data = [];
Replace line at 2737 @ this.$menuInner.on('click', 'li a', function (e, retainActive) { function
prevData = prevOption ? that.selectpicker.main.data[prevIndex],

Fixed

[SoftCircuits]

@jayb611 Do you know where I can get the fix? Or is it necessary to install some less or sass code in order to build my own?

[jayb611]

I have already mentioned above where you need to place and replace code to fix this issue, no you do not need SASS code

[tiesont]

Not sure what all has changed since @jayb611 posted their comment, but the only consistent fix I've found so far is slightly modifying the buildData function.

In the compiled source, that seems to be line 1657. From the "raw" source, it's line 1633.

Find this switch:

switch (type) {
  case 'data': {
    if (!this.selectpicker.main.data) {
      this.selectpicker.main.data = [];
    }
    Array.prototype.push.apply(this.selectpicker.main.data, mainData);
    this.selectpicker.current.data = this.selectpicker.main.data;
    break;
  }
  case 'search': {
    Array.prototype.push.apply(this.selectpicker.search.data, mainData);
    break;
  }
}

and comment out or remove the check for this.selectpicker.main.data:

switch (type) {
  case 'data': {
    this.selectpicker.main.data = [];
  
    Array.prototype.push.apply(this.selectpicker.main.data, mainData);
    this.selectpicker.current.data = this.selectpicker.main.data;
    break;
  }
  case 'search': {
    Array.prototype.push.apply(this.selectpicker.search.data, mainData);
    break;
  }
}

I have no idea what the performance implications of this will be, but it seems like resetting the this.selectpicker.main.data prevents the option elements from being duplicated. Hopefully someone else comes up with a better fix, but perhaps this helps someone else.