Probably this is a very stupid question, i'm new in vue.js and javascript, so please forgive me if the question is not properly explained or the answer is simple... I have a problem I wanted to get the id from one select, and put that id into the other api and display the models in the next select, the listings work beautifully as I do the rigid. But I don't know how to pass/paste the id into the async mounted axios function "api/sd/model/get", id)"
This 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>And this is 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 } //dont work
await axios
.post("http://local/api/sd/model/get", id) //dont work
.then(response => { this.info = response.data.data.items });
},
};Any good soul who can help this newbie? (if can explain the why of the solution as well, for understand, will be amazing!!)
Thanks in advance!!
It does not work right now, because when the component is mounted selectedMark is equal to null as you define it at the beginning. If you want to fetch data from "http://local/api/sd/model/ge" endpoint in the mounted hook you have to establish selectedMark somehow - e.g. the id of the first item.
async mounted() {
this.items = await axios
.get("http://local/api/sd/make/get")
.then(response => response.data.data.items);
if (this.items.length) {
this.selectedMark = this.items[0].id
const id = { id: this.selectedMark }
await axios
.post("http://local/api/sd/model/get", id)
.then(response => { this.info = response.data.data.items });
}
},
But if you want to fetch new data every time you select a different item you have to create a function that will be triggered on the change event.
<select v-model="selectedMark" @change="onchange">
<option v-for="model in items" :key="model.id" :value="model.id">
{{ model.name.value }}
</option>
</select>
async onchange() {
this.info = await axios
.post("http://local/api/sd/model/get", { id: this.selectedMark })
.then(response => { response.data.data.items });
}
Remember to add :value attribute to option tags
You can use @change event and use Methods hook as below.
<template>
<main class="home-page">
<select v-model="selectedMark" @change="getInfo(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>
</template>
<script>
import axios from 'axios';
export default {
name: "App",
data() {
return {
info: null,
items: [],
selectedMark: null,
selectedModel: null,
};
},
created() {
this.getItems()
},
methods: {
getItems() {
axios
.get("http://local/api/sd/make/get")
.then(response => { this.items = response.data.data.items });
},
getInfo(selectedMark) {
await axios
.post("http://local/api/sd/model/get", selectedMark) //dont work
.then(response => { this.info = response.data.data.items });
},
}
};