pespantelis/vue-typeahead

Query parameter is not sended in request

a47ae opened this issue · 7 comments

a47ae commented

Hey, when I tried out your component I recognized that the query parameter does not got send along with my request. I double checked in the ChromeDev tools but there is no GET parameter in the rquest send by vue-resource. But if I change the line
return this.$http.get(this.src, Object.assign(queryParam, this.data)) to
return this.$http.get(this.src, {params: Object.assign(queryParam, this.data)})
everything works as expected.

So maybe the params option needs to be statet explicitly?

Wait so you're saying what you're passing isn't working at all?

I have the same problem, the query parameter is not sended

a47ae commented

So this is what the request looks like with the original code:
without_params - there is not query parameter.

And this is the modified code where I added params:
with_params
In the vue-resource documentation the syntax for get is get(url, [options]) so one have to pass a params option. Maybe they changed the syntax in the recent version?

Exactly, with your change works fine (return this.$http.get(this.src, {params: Object.assign(queryParam, this.data)}) )

Thanks @a47ae for the issue!

This is related with the recent changes on vue-resource as you said.
I'll change it when I'll publish the next major release with the vue@2.0.

Until then, we could use the vue-resource@0.8 :)

a47ae commented

Thanks for clearing that up!
Looking forward to the next release. :)

b8ne commented

Hi I am also experiencing this problem, I have just installed everything so assuming I have the latest versions.

package.json
{ "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-9", "laravel-elixir-vue": "^0.1.4", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.14.0", "vue": "^1.0.26", "vue-resource": "^0.9.3" }, "dependencies": { "vue-typeahead": "^2.2.1" } }

Typehead.vue - script
`import VueTypeahead from 'vue-typeahead'

export default {
    extends: VueTypeahead, // vue@1.0.22+
    // mixins: [VueTypeahead], // vue@1.0.21-

    data () {
        return {
            // The source url
            // (required)
            src: '../../../api/players',

            // Limit the number of items which is shown at the list
            // (optional)
            limit: 1,

            // The minimum character length needed before triggering
            // (optional)
            minChars: 1,

            queryParamName: 'name',
        }
    },

    methods: {
        // The callback function which is triggered when the user hits on an item
        // (required)
        onHit (item) {
            console.log(item)
        },

        // The callback function which is triggered when the response data are received
        // (optional)
        prepareResponseData (data) {
            // data = ...
            for (let item of data) {
                console.log(item.firstName);
            }
            return data
        }
    }
}`

EDIT* sorry got mixed up on repos, i applied this fix manually and all is working, just realised PR hasnt been merged yet