vue-search-select in laravel and vuejs could not load data

@usmanbasharal the example in the docs for loading initial data with ajax uses model-list-select component. Do you tried to use model-list-select component instead of model-select?

You can find the code here: https://github.com/moreta/vue-search-select/blob/master/src/views/ModelAjax.vue#L42

it gives me this error <model-list-select> - did you register the component correctly

@usmanbasharal because you have to import it:

import { ModelListSelect } from 'vue-search-select';

export default {
   components: {
      ModelListSelect
   },
   //...
}

I did this but the dropdown is still empty

<model-list-select :list="Booksarrays" option-value="Booksarrays.id" option-text="Booksarrays.name" v-model="form.book_id" placeholder="select item" @change="getBook_id()" ></model-list-select>

@usmanbasharal try:

<model-list-select
   :list="Booksarray"
   option-value="id"
   option-text="name"
   v-model="form.book_id"
   placeholder="select item"
></model-list-select>

and make sure you're getting the right response from your API. Also check the console if you get any errors.

thanks it worked but when I am typing something in dropdown search box it dose not show me what I typed

@usmanbasharal can you show the full component?

import { ModelListSelect } from "vue-search-select";

export default {  components: {    ModelListSelect,},
data() {    return {  Booksarray: [],
    form: new Form({
    id: "",
    book_id: "",
    shell_id: "",
    purchase_id: "",
    quantity: "",
    unitprice: "",
    supplydate: ""
  }),

   }
    ,methods: { loadStocks() {
  // $(".hideme").hide();

  // if (this.$gate.isAdmin() || this.$gate.isUser()) {
  this.$Progress.start(); // NProgress.start();
  axios.get("api/Stock").then(({ data }) => (this.Stocks = data));

  axios.get("api/getAllStock").then(({ data }) => (this.data = data));
  axios.get("api/getAllBook").then(({ data }) => (this.Books = data));
  axios.get("api/getAllShell").then(({ data }) => (this.Shells = data));

  axios.get("api/getAllBook").then(({ data }) => (this.Booksarray = data));
  axios
    .get("api/getAllPurchase")
    .then(({ data }) => (this.Purchases = data));
  this.alert();
  this.$Progress.finish();

  // }
  // NProgress.done();
},},
  created() {
Fire.$on("searching", () => {
  let query = this.search;
  axios
    .get("api/searchStock?q=" + query)
    .then(data => {
      this.Stocks = data.data;
    })

    .catch(() => {});
});
this.loadStocks();
// load the page after 3 secound
Fire.$on("refreshPage", () => {
  this.loadStocks();
});
 }

I set the width: 100%; and it worked Thanks a lot

does it have @change ? because I want to call a function

@usmanbasharal use @input instead, as v-model is shorthand for :value="prop" @input="prop = $event.target.value".

I want to get the books by calling the below function while I select id from drop down list how to do it in normal dropdown box in the select section @change we call the function but I do not know how to do it in model-list-select is there any option for this?

         getBook_id: function() {
  
         axios
      .get("api/getBybook_ids", {
        params: { book_id: this.form.book_id }
      })
      .then(
        function(response) {
          this.Stocks = response.data.data;
        }.bind(this)
      );
    // this.$Progress.finish();
    // this.GridLoader.finish();
    this.seen = false;
  }
},

Thank You very very much it worked