[F7Vue] Refresh/Update SmartSelect

Questions
1

Is there a way to re-render (update) the contents of a smart-select (without closing/re-opening) while it is open?

Reason:

  • I have a list of items with checkboxes.
  • If I click a button (or whatever) inside the smart-select, I want to change the states of ALL checkboxes at once, without closing the smart-select.

There was an initSmartSelects method in F7v1, but that’s missing now.

How would I change all states from within the smart-select?

1 Like
2

You mean inside of smart select page or other container? You can just toggle all checkboxes. When smart select is opened it has $containerEl Dom7 element with the ss page or popup. So you can just toggle all checkboxes like:

smartSelect.$containerEl.find('input').prop('checked', true).trigger('change');

Last .trigger('change') required to trigger change event so SS understand it need to emit events further, e.g. to Vue component

3

hi @nolimits4web

I meant from inside the smart-select container (while it’s visible on screen).

I tried it as you showed, but ran into an stack-overflow when triggering the update.
This is mainly because the smart-selects values are based on a reactive property-array.

If I exclude the .trigger('change'), it works, but the values are not recognized (as you said).
That’s why I thought, there might be an API for this…

So right now I’m doing it like this (which works fine):

mySmartSelect.$containerEl.find('input').prop('checked', true);

mySmartSelect.setValue(newValuesArray);

this.$emit('changed', mySmartSelect.getValue());
1 Like