Vue.js Load select box with REST API Data

Last Updated: March 10, 2020

In this example, you can see how to load the data to select box using Rest Api.

 

In template section, you need to have the following code

<select v-model="customer.company.id" >
  <option v-for="(com, index) in companies" :value="com.id">{{com.name}}</option>
</select>

Next you can add the data variables

    data() {
        return {
            rows:'',
            customer:{
               company:{
                   id:''
               }
            },
         
        }
    }

Then add the computed values

computed: {
       
        companies(){
            return this.rows 
        }
    },

Finally load the data from the Rest Api

this.$store.dispatch('getObject', {
                'url': Properties.API_URL+ Properties.GET_CONTACTS+"/" + this.$route.params.id
            })
            .then(response => {
                this.customer = response.data.data
                this.isLoading = false

            })
            .catch(error => {
                console.log(error);

            });