I'm trying to fetch data from an API using Vue Form and Axios, but I'm having trouble retrieving it at the moment. I might have missed something. Specifically, I need to retrieve the brand of a car. When a brand is selected in one dropdown, the series list in another dropdown should change based on the selected brand. Can you please help me with this?
Here's the Vue.js code:
<div class="form-group">
<label>Brand</label>
<select class="select-dropdown-no-search form-control" v-model="brand" @change="listSeries()" name="brand" id="brand">
<option value="">--Select--</option>
<option v-for='data in brands' :value='data.BrandId'>{{ data.BrandName }}</option>
</select>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Series</label>
<select class="select-dropdown-no-search form-control" v-model="series" @change="listCylinders()" name="series" id="series">
<option value="">--Select--</option>
<option v-for='data in series' :value='data.BrandId'>{{ data.BrandName }}</option>
</select>
</div>
</div>
And here's the Vue.js code:
import axios from 'axios';
import API from '../API';
var urlAddStock = API.url.host + '/addstock';
var urlBrandList = API.url.host + '/brand';
var urlSeriesList = API.url.host + '/series';
var urlCylinderList = API.url.host + '/cylinder';
var urlTypeList = API.url.host + '/type';
//Vue.component('v-select', VueSelect.VueSelect);
var inputMobile = {
init: function() {
this.vueConfig();
API.auth();
},
vueConfig: function() {
var app = new Vue({
el: '#app',
data: {
stockSubmit: false,
brand: "",
brands: [],
series: "",
series: [],
access_token: ""
},
methods: {
submitStock: function() {
let self = this;
this.stockSubmit = true;
axios({
method: 'post',
url: urlAddStock,
data: {
BrandId: this.brand,
brand: "",
SeriesId: this.series,
series: "",
access_token: localStorage.getItem("token")
}
}).then(res => {
console.log(res.data);
if (res.data.message === "Data Added Successfully") {
self.stockSubmit = false;
} else {
self.stockSubmit = false;
}
}, err => {
console.log(err);
self.stockSubmit = false;
});
},
listBrand: function() {
let self = this;
axios({
method: 'post',
url: urlBrandList,
data: {
itemid: 6,
access_token: localStorage.getItem("token")
}
}).then(response => {
console.log(response.data);
if (response.data.message === "Data Fetched Successfully") {
this.brands = response.data;
}
}, err => {
console.log(err);
});
},
listSeries: function() {
let self = this;
axios({
method: 'post',
url: urlSeriesList,
data: {
brandId: this.brand,
access_token: localStorage.getItem("token")
}
}).then(res => {
console.log(res.data);
if (res.data.message === "Data Fetched Successfully") {
this.series = response.data;
}
}, err => {
console.log(err);
});
}
}
})
}
}