Vue multiselect and sending a query via axios call

Question

I'm trying to use Vue-multiselect as an autocomplete search against a database, but I'm having issues as far as retrieving the query that I'm sending from the axios call.

I'm seeing the value that I'm typing in as 'val' within the function, but when I dump the query from the request in the controller it shows null ( looking at the request, the query param seems to be empty). I'm thinking there's an issue with how I'm sending it perhaps.

Is my function incorrect as far as how I'm sending the query?

Here's the code:

    <div class="form-group col-lg-4">
<h4>Copy Users</h4>
<br>
<multiselect 
    v-model="copyUsers" 
    :options="copyUsersOptions" 
    @search-change="val => searchCopiedUsers(val)"
    :multiple="true" 
    :loading="loading"
    placeholder="Enter user(s) to be copied" 
    label="name"
    track-by="value">
</multiselect>
</div>


loading:false,
copyUsers: [],
copyUsersOptions: [],
searchCopiedUsers: function(val) {
      console.log('searched for', val);
      if (val) {
        this.loading = true;
        this.copyUsersOptions = [];

        let self = this;

        axios.get('users/search',{params: {query: this.val}})
            .then(function (response) {
                self.options = response.data;
        });

      } else {
        this.options = [];
      }
},

controller.php

public function getUsers(Request $request)
{
    dd($request->get('query'));
}

Kellen · Accepted Answer · 2021-07-29 20:09:07Z

3

You're sending the data object this.val, which is what your vue app is storing as val in its local data store. Have you tried passing the value directly into the get request like this: axios.get('users/search',{params: {query: val}})?

answered Jul 29, 2021 at 20:09

Kellen

3182 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue multiselect and sending a query via axios call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related