0
196
VistasCómo obtener datos de entrada del componente Vue
Busqué en muchos sitios de Internet pero no encontré fragmentos útiles para la resolución de mi problema.
Quería lograr que los datos simples pasen del valor del campo de entrada en el componente Vue al elemento raíz de Vue con un método para obtener datos,
por ejemplo, simplemente cuando presiono el botón msg , el navegador me alerta con un mensaje de mensaje en lugar de undefined .
Con la tecnología Vue, no entiendo absolutamente cómo hacer esto. Paso casi un día tratando de entender esto. En realidad, no entiendo cómo funciona Vue con estas raíces y componentes incluso después de leer los conceptos básicos enésimas veces. ¿Hay alguna explicación sencilla?
¡Por favor ayuda!
<div id="form"> <button v-on:click="submitBtn">Save</button> <custom-form></custom-form> </div> <script> var testApp = Vue.createApp ({ methods: { submitBtn: function(){ alert(submit.test) } } }) testComponent.component('custom-form', { template: ` <label>test<input type="text" v-model=value :value=this.test></label> ` , data: function() { return { test: 'msg' } }, methods: { test: function() { return this.test } } }) const vm = testApp.mount('#form') </script>1 Respuestas
Responde la pregunta0
simplemente cuando presiono el botón Enviar, el navegador me alerta con un
msgde mensaje en lugar deundefined.
Aquí hay un ejemplo que acabo de probar que creo que te ayudará:
En el archivo app.js:
Vue.createApp({ data() { return { test: '' }; }, methods: { testMessage() { return alert(this.test); } } }).mount('#form');Y en el archivo index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js</title> </head> <body> <div id="form"> <label for="testInput">Test Message</label> <input type="text" id="testInput" v-model="test" /> <button v-on:click="testMessage">Submit</button> </div> <script src="https://unpkg.com/vue@next"></script> <script src="app.js"></script> </body> </html> 