Estoy aprendiendo Vue y tratando de probar cómo pasaría una entrada de usuario de una función a otra.
Mi caso de uso es este. Quiero tomar una entrada de los usuarios, almacenarla y luego proporcionarla a una segunda función como una variable que puede usar para hacer una llamada a la API.
De forma aislada, las dos secciones del código son:
Entrada del usuario
<div id="v-model-basic" class="demo"> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ message }}</p> </div> Vue.createApp({ data() { return { message: '' } } }).mount('#v-model-basic')Llamada API
import axios from 'axios'; /* API call for the weather data */ export default { name: "Weather", data() { return { weatherList: [] }; }, methods: { getweatherData() { axios.get("https://anAPIpath.com/that-I-want-to-add-user-input-to").then(response => (this.weatherList = response.data)); } } };¿Hay alguna manera de hacer esto en Vue donde ambos sean métodos dentro de esa función de exportación, o es solo un enfoque incorrecto? Como se mencionó, Vue es nuevo y está aprendiendo, y quiero asegurarme de abordar esto de la "manera Vue" para que las cosas estén lo más ordenadas y ordenadas posible.
Veo que lo está haciendo bien, solo necesita agregar la llamada API a una etiqueta de secuencia de comandos en el mismo archivo y luego acceder al mensaje de entrada como este:
axios.get("https://anAPIpath.com/"+ this.message)Vue tiene varias opciones para pasar variables entre componentes.
propsPuedes hacer que la variable sea un accesorio de la otra:
props: { message: String } Se accede a la propiedad con this.message , pero se recomienda que lo copie en una variable en data y refleje los cambios con $emit (consulte el enlace de documentación y la sección $emit a continuación).
Consulte la documentación: https://v3.vuejs.org/guide/component-props.html#props
$emit Puede informar a un componente principal sobre los cambios del otro componente con $emit . Puede simplemente nombrar un evento usted mismo y pasar el valor como el primer parámetro.
this.$emit('messageUpdate', this.message);Consulte la documentación: https://v3.vuejs.org/guide/migration/emits-option.html#emits-option
Con el almacenamiento de datos de VueX, puede transferir variables de cualquier componente de su aplicación a cualquier otro.
Esto requiere un poco más de delicadeza para configurarlo. Sugiero ir con lo anterior primero.
Si está interesado (definitivamente vale la pena aprender), aquí está el enlace:
https://vuex.vuejs.org/guide/#getting-started