Probablemente esta es una pregunta muy estúpida, soy nuevo en vue.js y javascript, así que perdónenme si la pregunta no se explica correctamente o la respuesta es simple... Tengo un problema. Quería obtener la identificación de uno. seleccione, y coloque esa identificación en la otra API y muestre los modelos en la siguiente selección, los listados funcionan maravillosamente mientras hago lo rígido. Pero no sé cómo pasar/pegar la identificación en la función axios montada asíncronamente "api/sd/model/get", id)"
esta es mi plantilla
<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>Y este es el guion
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 }); }, };¿Algún alma buena que pueda ayudar a este novato? (¡Si también puede explicar el por qué de la solución, para entenderlo, será increíble!)
¡¡Gracias por adelantado!!
No funciona ahora mismo, porque cuando se monta el componente, selectedMark es igual a nulo como lo definiste al principio. Si desea obtener datos del punto final "http://local/api/sd/model/ge" en el gancho montado , debe establecer la marca seleccionada de alguna manera, por ejemplo, la identificación del primer elemento.
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 }); } },Pero si desea obtener nuevos datos cada vez que selecciona un elemento diferente, debe crear una función que se activará en el evento de cambio.
<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 }); }Recuerde agregar el atributo :value a las etiquetas de opción
Puede usar el evento @change y usar el gancho Methods como se muestra a continuación.
<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 }); }, } };