Выберите раскрывающееся меню, не показывающее значение по умолчанию при перезагрузке ⇐ Javascript

[Anonymous]

Прежде всего, позвольте мне упомянуть, что мои знания о JavaScript и Vue весьма ограничены, так как я все еще студент. Они не преподаются в моих классах, поэтому, если вы заметите какие -либо существенные ошибки в моем коде, пожалуйста, знайте, что я считаю, что это ожидалось. Я еще не знаком с лучшими практиками или другими нюансами. Sombobox должен обновлять значения во втором. Хотя значения во втором Combobox получают обновления, значение по умолчанию не «выбран», оно не визует текст опции по умолчанию. Функция, где пользователь выбирает пол, который содержит несколько классных комнат. При переходе с одного этажа на другой я бы хотел, чтобы второй Combobox отобразил «Выберите класс» в качестве значения по умолчанию.
Это код, который у меня есть в настоящее время. < Br />
import { ref, onMounted } from 'vue';
import axios from 'axios';
import APIComboBox from './components/APIComboBox.vue';

// Llamar a la función al montar el componente
onMounted(() => {
cargaListadoPlantas();
});

// Definir las variables reactivas
const plantaSeleccionada = ref('');
const listadoPlantasOpciones = ref([]);

// Función para cargar los datos de la API
const cargaListadoPlantas = async () => {
console.log("Cargando listado plantas.");
try {
const response = await axios.get('http://localhost:8085/floors');
listadoPlantasOpciones.value = response.data;
console.log("Listado obtenido.\n" + response.data);
} catch (error) {
console.error('Error al cargar el listado de valores', error);
}
};

// Función para manejar la selección de plantas
const manejarSeleccionPlantas = (nuevoValor) => {
console.log("Cambios en selección de plantas.");
plantaSeleccionada.value = nuevoValor;
console.log('Valor seleccionado en combo plantas:', nuevoValor);

// Resetea el aula seleccionada y carga el listado de aulas
cargarAulasServidor(plantaSeleccionada.value);
};

const aulaSeleccionada = ref('');
const listadoAulasPlanta = ref([]);

// Función para cargar los datos de la API (Aulas)
const cargarAulasServidor = async (plantaParam) => {
console.log('Recuperando aulas para ' + plantaParam);
try {
const response = await axios.get('http://localhost:8085/classrooms', {
params: { floor: plantaParam }
});

listadoAulasPlanta.value = response.data;
console.log('Aulas recuperadas:\n' + response.data);
aulaSeleccionada.value = '';

} catch (error) {
console.error('Error al cargar el listado de aulas', error);
}
};

// Función para manejar la selección de aula
const manejarSeleccionAula = (nuevoValorAula) => {
console.log("Cambios en selección de aulas.");
aulaSeleccionada.value = nuevoValorAula;
console.log('Valor seleccionado en combobox aulas:', aulaSeleccionada.value);
cargarProyectoresAulas(aulaSeleccionada.value);
};

const listadoProyectores = ref([]);
const selectedRow = ref(null); // Variable para almacenar la fila seleccionada

// Función para cargar los proyectores de un aula específica
const cargarProyectoresAulas = async (aulaParam) => {
console.log('Recuperando proyectores para ' + aulaParam);
try {
const response = await axios.get('http://localhost:8085/classroom-projectors', {
params: { classroom: aulaParam }
});

listadoProyectores.value = response.data;
console.log('Proyectores recuperados:\n' + response.data);
selectedRow.value = null; // Resetea la selección cuando cambia la lista

} catch (error) {
console.error('Error al cargar el listado de proyectores.', error);
}
};

const listadoComandos = ref([]);

// Función para cargar los comandos de un proyector seleccionados
const cargaComandosProyector = async (proyector) => {
console.log('Recuperando comandos para ' + proyector);
try {
const response = await axios.get('http://localhost:8085/commands', {
params: { modelname: proyector }
});

listadoComandos.value = response.data;
console.log('Comandos recuperados:\n' + response.data);

} catch (error) {
console.error('Error al cargar el listado de comandos.', error);
}
};

// Función para manejar la selección de un proyector en la tabla
const proyectorSeleccionado = (index, modelo) => {
console.log('Modelo del proyector:', modelo); // Log para verificar el modelo seleccionado
selectedRow.value = index; // Almacena el índice de la fila seleccionada
cargaComandosProyector(modelo);

};




Control remoto proyectores.









Reset Aula







Modelo
Aula




{{ projector.model }}
{{ projector.classroom }}










Accion




{{ comando.action }}









/* Ensure cursor changes to pointer */
.cursor-pointer {
cursor: pointer;
}

< /code>



// Importa las funciones necesarias de Vue
import { defineProps, defineEmits, ref } from 'vue';

// Recibe las opciones como props
const props = defineProps({
opciones: {
type: Array,
required: true, // El listado de opciones es obligatorio
},
});

// Declara una variable reactiva para almacenar el valor seleccionado
const valorSeleccionado = ref(''); // Valor por defecto: cadena vacía

// Define un emisor para comunicar el valor seleccionado al componente padre
const emit = defineEmits(['selectActualizado']);

// Función para emitir el valor seleccionado hacia el componente padre
const emitirSelectActualizado = () => {
emit('selectActualizado', valorSeleccionado.value);
};









Seleccione un valor.



{{ opcion }}








< /code>
I have tried adjusting the timing of the selected value update by moving it from one function to another. Also, I attempted to introduce a prop attribute to let the parent component specify the selected item. However, this approach did not work either so I backtracked.
I have seen other people having the same problem but their solutions did not work for me.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -reloading