How to identity suggest box within the method getSuggestionList while developing Async?

[lalits2002]

I'm submitting a ...

• [x] support request

What is the current behavior?

If we want to implement Async suggest how can we pass function parameter for getSuggestionList when deal with multiple suggest boxes on same page? I need to pass param so that based on the param I can call my respective API to populate the results.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

What is the expected behavior?

How are you importing Vue-simple-suggest?

• [ ] ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• [ ] ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• [ ] Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• [ ] CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• [ ] UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

What is the motivation / use case for changing the behavior?

Enhance the capability while have multiple suggest box on same page.

Please tell us about your environment:

• Vue.js Version: 2.5.0
• Vue-simple-suggest version: 1.7.0
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[kaskar2008]

Hello!

You can use a function wrapper like so:

<vue-suggest :list="listGenerator(list1Props)"></vue-suggest>
<vue-suggest :list="listGenerator(list2Props)"></vue-suggest>
<vue-suggest :list="listGenerator(list3Props)"></vue-suggest>

export default {
  computed: {
	list1Props() {
      return {
        param1: 5,
        param2: 'asd',
      }
    },
	list2Props() {
      return {
        param1: 12,
        param2: 'fghfth',
      }
    },
	list3Props() {
      return {
        param1: 23,
        param2: 'wewewe',
      }
    },
  },
  methods: {
    listGenerator(props) {
      return (inputValue) => {
        return fetch(`https://www.googleapis.com/books/v1/volumes?printType=books&q=${inputValue}`, {
          method: 'post',
          body: JSON.stringify(props)
        });
      };
    },
  },
}

I think you've got the idea :)

[lalits2002]

Thanks for your email.

I will try this approach and let you know.

I have one more question. How can we display small ajax loader on each suggest box while its fetching data via API???

Thanks and best regards

On Thu, 26 Mar 2020, 1:53 pm Karen, [email protected] wrote:

Hello!

You can use a function wrapper like so:

export default { computed: { list1Props() { return { param1: 5, param2: 'asd', } }, list2Props() { return { param1: 12, param2: 'fghfth', } }, list3Props() { return { param1: 23, param2: 'wewewe', } }, }, methods: { listGenerator(props) { return (inputValue) => { return fetch(https://www.googleapis.com/books/v1/volumes?printType=books&q=${inputValue}, { method: 'post', body: JSON.stringify(props) }); }; }, }, }

I think you've got the idea :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/KazanExpress/vue-simple-suggest/issues/294#issuecomment-604293758, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4Y6IHHMS7FVRENUP73TGTRJMGHDANCNFSM4LNMIF4A .