vue.js get id from select to axios post and display another select

user_19486289 0
Viewed 88

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!!

axios vue-component vue.js javascript
2 Answers

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 });
    this.selectedModel = this.info.length ? this.info[0].id : null;
  }
},

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 });
  this.selectedModel = this.info.length ? this.info[0].id : null;
}

Remember to add :value attribute to option tags

Working example BUT with the use of JSON placeholder FREE REST API (just to be able to show you how it works)

user_150951040

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 });
    },
  }
};
user_135571590
Related