vuetable-2-tutorial-bootstrap icon indicating copy to clipboard operation
vuetable-2-tutorial-bootstrap copied to clipboard

Search not working in Bootstrap example

Open jdriesen opened this issue 8 years ago • 6 comments

Hi Everybody...

Can please smb give me a hand ? I've downloaded and installed this repo. Everything works fine (i.e. dataloading, sorting) except the Search functionality. I can't make it work (and console.log doesn't give me any error at all)

Somebody having an idea ?

Feeling so dump ...

Thanks in advance for your reply,

Kind regards, Johnny

jdriesen avatar Feb 27 '17 14:02 jdriesen

I've just experienced this on a new installation which pulled [email protected], filter events are firing, but listeners are not picking it up..

My other existing project which uses [email protected] is working fine though...

filpineda avatar Feb 28 '17 06:02 filpineda

Yep, that's exactly the same issue I'm having... Event is fired, but listener doesn't pick it up...

Grtz, Johnny

jdriesen avatar Feb 28 '17 07:02 jdriesen

you can try to pull specific versions for your node_modules this is my current list of working packages: [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Hope this will get yours to work

filpineda avatar Feb 28 '17 07:02 filpineda

Thanks @filpineda . Found out there is a small prob with https://github.com/cklmercer/vue-events/tree/vue-2.x More about it later on (it's only 07:45 AM here in Belgium :)

Grtz, Johnny

jdriesen avatar Feb 28 '17 07:02 jdriesen

@jdriesen Try using this.$events.listen() in the created function instead.

  data () {
    // ...
  },
  created () {
    this.$events.listen('filter-set', filterText => {
      this.moreParams = {
        'filter': filterText
      }
      Vue.nextTick( () => this.$refs.vuetable.refresh())      
    },
    this.$events.listen('filter-reset', filterText => {
      this.moreParams = {}
      this.$refs.vuetable.refresh()
      Vue.nextTick( () => this.$refs.vuetable.refresh())
    }
  }

ratiw avatar Feb 28 '17 10:02 ratiw

Thanks @ratiw !! Your solution did it. (there were some brackets missing in your code, but I managed to solve this.)

Below the final solution

created() {
    this.$events.listen('filter-set', filterText => {
      this.moreParams = {
        'filter': filterText
      } // End of moreParams
      
      Vue.nextTick( () => this.$refs.vuetable.refresh())
    }) // End of Filter-set Listener

    this.$events.listen('filter-reset', filterText => {
      this.moreParams = {}

      Vue.nextTick( () => this.$refs.vuetable.refresh())
    }) // End of Filter-reset Listener
    
  }, // End of created 

Thanks again for your support.

jdriesen avatar Feb 28 '17 10:02 jdriesen