vue.js获取从选择到Axios帖子的ID并显示另一个选择

Question

可能这是一个非常愚蠢的问题，我是vue.js和javascript的新手，所以如果问题无法正确解释或答案很简单，请原谅我 我想从一个选择中获取 id ，然后将ID放入另一个API中，并在下一个选择中显示模型，列表在我执行刚性时可以很好地工作。 但是我不知道如何将ID传递/粘贴到异步安装的Axios函数“ API/SD/Model/Get”，ID）“

这是我的模板

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

这是脚本

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 });

   },
   
  
};

有什么好灵魂可以帮助这个新手？ （如果也能解释解决方案的原因，请理解，将真是太神奇了！！）

谢谢！

Answer 1

它现在不起作用，因为当组件安装 Selectedmark 等于null时，您在开始时定义它。如果您想从“ http：// local/api/sd/model/ge”中获取数据，则已安装挂钩中的端点，您必须建立 selectedmark 以某种方式 - 例如第一个项目的ID。

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;
  }
},

但是，如果您每次选择其他项目时都需要获取新数据，则必须创建一个将在更改事件上触发的函数。

<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;
}

请记住要添加：值属性属于选项标签

示例使用JSON占位符免费REST API（只是为了向您展示其工作原理）

Answer 2

您可以使用@change事件，并使用方法挂钩如下。

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