Estoy tratando desesperadamente de generar múltiples entradas seleccionadas para un JSON dado desde un Backend, pero no puedo hacer que funcione. La respuesta JSON que recibo se parece a esto:
{ "selectData": [ { "id": "ats_2323680", "label": "Follow up", "value": "option_id_1" }, { "id": "ats_2323701", "label": "1st Interview, Client", "value": "option_id_1" },... ], "optionData": { "texts": [ "Sourced", "On hold", ... ], "values": [ "option_id_1", "option_id_2", ] } }Ya probé varias formas y mi último intento se ve así:
Modelo:
<div v-for="select in selectData" :key="select.id"> <p>{{ select.label }}</p> <v-select :items="optionData.texts" :value="getOptionById(select.value)" @input="(id) => updateSelect(select, id)" ></v-select> </div>Guion:
<script> export default { data() { return { selectData: [], optionData: { values: [], texts: [], }, }; }, methods: { fetchData() { const headers = this.authorizationHeader; axios .get(url, { headers, } ) .then((response) => { let data = response.data; this.selectData = data.selectData; this.optionData = data.optionData; }) .catch((error) => console.log(error)); }, updateSelect(select, id) { select.value = id; }, getOptionById(id) { let i = this.optionData.values.findIndex((x) => x === id); return this.optionData.texts[i]; }, }, mounted() { this.fetchData(); }, }; </script>Tampoco estoy muy contento con la estructura JSON que estoy obteniendo. La razón por la que también se envía optionTextId es que los textos de opción estarán en diferentes idiomas. Estoy muy contento con cualquier consejo.
Creo que lo resolví. Creo que fue un caso elegante de pensar demasiado.
Primero cambié la estructura JSON en el backend como:
{ "selectData": [ { "id": "ats_2323680", "label": "Follow up", "text": "Sourced", }, { "id": "ats_2323701", "label": "1st Interview, Client", "text": "Kandidaten nachgefasst", }, ... ], "optionData": { "texts": [ "Sourced", "Kandidaten kontaktiert", ... ], "values": [ "option_id_1", "option_id_2", ... ] } }Luego cambié el código Vue a: Plantilla:
<div v-for="select in selectData" :key="select.id"> <label for="location">{{ select.label }}</label> <select id="location" name="location" v-model="select.text"> <option v-for="option in optionData.texts" :key="option" :value="option" > {{ option }} </option> </select> </div>Guion:
<script> export default { data() { return { selectData: [], optionData: { values: [], texts: [], }, }; }, methods: { fetchData() { const headers = this.authorizationHeader; axios .get( url, { headers, } ) .then((response) => { let data = response.data; this.selectData = data.selectData; this.optionData = data.optionData; }) .catch((error) => console.log(error)); }, }, mounted() { this.fetchData(); }, }; </script>Aparentemente, cambiar la estructura JSON y usar v-model hizo la magia. Podría ser obvio. Espero que esto ayude a un alma perdida como yo en algún momento :)