V-select bug while selecting elements in Vuejs

Question

I'm building a small application in vuejs 2 where I'm using v-select package for select box, Problem I'm facing is:

I've declared v-select in my component something like this:

<div class="form-group"><label class="col-sm-2 control-label">Company name:</label>
    <div class="col-sm-6">
        <v-select :options="companyOptions" v-model="company_name" :on-search="getOptions" placeholder="Company name"></v-select>
    </div>
</div>

So accordingly I'm having data defined as company_name, and I'm calling an axios event to get the searchable data, while the component is being loaded I'm calling index data of first 50 set for initial selection and if anybody types then I'm calling a function getOptions to get data related to the input, now suppose if somebody selects any data and then removes it again from the selection and again search with key press event the searchable data is not displayed, I can see that my axios call is working fine and I'm able to get the relevant data. but it is not displaying in dropdown as it says:

Error in render function: "TypeError: Cannot read property 'label' of null"

Which is coming from the company_name model which was selected. Following is my code in codepen

In this my axios is not working as it says mixed content:

https://codepen.io/anon/pen/Bdeqam?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://connect.stellar-ir.com/api/companies'. This request has been blocked; the content must be served over HTTPS.

So I'm unable to explain properly in this code set. But my code looks same as declared in codepen.

Help me out in this.

Phil Phil · Accepted Answer · 2017-09-07T10:23:30

The error is because your computed values are undefined and undefined is not a string, so no string methods (toLowerCase()) are available. The response.data.model.data must look like this:

[
    {
        id: 1234,
        name: 'example'
    }, {
        id: 12345,
        name: 'example2'
    }
]

if you get an object instead of an array push it to the array: this.serverData.push(response.data.model.data)

Replace your axios call with:

this.serverData = [
    {
      id: 1234,
      name: 'example'
    }, {
      id: 12345,
      name: 'example2'
    }
]

to test it.

In your getOptions() method you calling loading(true or false), but your fetchIndexData() method has an asynchronous axios call. Use async/await, a callback function or a promise chain to wait for the data and show the loading indicator correctly.

On every keypress an request is send to the server i would recommend to use a debounce function.

Tipp Line 42: https://stackoverflow.com/a/42028776/6429774

axios.post('http://connect.stellar-ir.com/api/companies', searchData).then(response => {
  if(response.status === 200)
    {
      this.serverData = response.data.model.data
    }
}).catch(error => {
    console.log(error)
});

V-select bug while selecting elements in Vuejs

1 Answers