Forgive me if this is a silly question, as I am new to Vue.js and JavaScript. I'm having trouble getting the id from one select element and using it in another API to display models in the next select element. The listings are working fine when I hardcode them, but I don't know how to pass the id into the async mounted axios function "api/sd/model/get", id)
Here is my template:
<main class="home-page">
<select v-model="selectedMark">
<option v-for="model in items" :key="model.id">{{ model.name.value }}</option>
</select><br><br>
<select v-model="selectedModel">
<option v-for="make in info" :key="make.id" >{{ make.name.value }}</option>
</select><br><br>
<button type="submit" class="conectButton">Połącz</button>
<div class="titleCarMain"><p class="titleCar">{{selectedMark}}</p><p class="titleComponent">{{selectedModel}}</p></div>
</main>This is the script:
import axios from 'axios';
export default {
name: "App",
data() {
return {
info: null,
items: [],
selectedMark: null,
selectedModel: null,
};
},
async mounted() {
axios
.get("http://local/api/sd/make/get")
.then(response => { this.items = response.data.data.items });
const id = { id: this.selectedMark } //doesn't work
await axios
.post("http://local/api/sd/model/get", id) //doesn't work
.then(response => { this.info = response.data.data.items });
},
};Can anyone help this newbie out? It would be amazing if you could also explain why your solution works for better understanding. Thanks in advance!