SearchformVue e.selected bug fix (slim-select filters)

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -31,14 +31,14 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
+      console.log("slim search submited", this.typed, this.autocomplete, this.filters, this.slimFilters)
       // unfocus the text input to hide the keyboard on mobile device
       this.$input.blur()
       // New search is triggered by Base.vue with router (which will also fill the store)
       // cleaning slimfilters
       let filters = []
       this.slimFilters.forEach((filter, index) => {
-        console.log('onsubmit foreach filters', filter)
+        console.log('onsubmit foreach slimFilters', filter)
         if(filter){
           filters.push(filter)
         }
@@ -93,8 +93,10 @@ export default {
 
     },
     onSelectFiltersChange(index, info){
-      console.log('onSelectFiltersChange', index, info, this.slimFilters, this.filters)
+      console.log('slim onSelectFiltersChange', index, info, this.slimFilters, this.filters)
       this.slimFilters[index] = info.value
+      console.log(this.slimFilters);
+      
     },
     onClickFilters(e){
       console.log('onClickFilters legend', e)
@@ -175,8 +177,12 @@ export default {
     // customize the select filters
     // http://slimselectjs.com/options
     const selects = this.$el.querySelectorAll('select')
+    console.log('slim selects', selects);
+    
     let slim;
     selects.forEach((selectElement, index) => {
+      console.log('slim selects forEach', selectElement, index);
+      
       // get the first option to make the placeholder then empty it
       const placeholder_option = selectElement.querySelector('option:first-child')
       // console.log('placeholder_option', placeholder_option);
@@ -185,20 +191,24 @@ export default {
       placeholder_option.setAttribute("data-placeholder", true)
       placeholder_option.innerHTML = ''
       slim = new SlimSelect({
+        events:{
+          afterChange: (newval) => {
+            console.log('slim slimselect onchange', index, newval, this)  
+            this.onSelectFiltersChange(index, newval[0])
+          }
+        },
         select: selectElement,
         placeholder: placeholder,
-        // allowDeselect: true
-        allowDeselectOption: true,
+        allowDeselect: true,
         showSearch: false,
-        closeOnSelect: true,
-        onChange: (info) => {
-          this.onSelectFiltersChange(index, info)
-        }
+        closeOnSelect: true
       })
-      console.log('slimselect selected', slim.selected(), index)
-      this.slimFilters[index] = slim.selected()
+      console.log('slim', slim);
+      // console.log('slimselect selected', slim, slim.selected(), index)
+
+      this.slimFilters[index] = slim.getSelected()[0];
     })
-    console.log('slimSelect after init', this.slimFilters)
+    console.log('slimSelect slimFilters after init', this.slimFilters)
   },
   render(h) {
     // console.log('searchForm render')