vue.js 从选择中获取 id 到 axios 发布并显示另一个选择

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

请记住将 :value 属性添加到选项标签

使用 JSON 占位符FREE REST API 的工作示例（只是为了能够向您展示它是如何工作的）

Answer 2

您可以使用@change事件并使用Methods挂钩，如下所示。

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