Quiero mostrar los datos del elemento de entrada de 'formulario personalizado' en la 'barra de estado' del componente secundario después de presionar el botón 'Enviar', pero cuando se presiona el botón, simplemente no sucede nada. ¿Alguna idea de por qué? Por favor, vea el enlace a continuación.
https://jsfiddle.net/L15fupya/
productForm.component('status-bar', { props: ['outputData'], template: '<p v-html="outputData"></p>', data(){ return { outputData: '' } }, methods: { doSomething (data) { this.outputData = data console.log(this.outputData) } } })Verifique los cambios a continuación tanto para la template como para js . Podrá comprender el flujo cuando compare lo siguiente con su código JSFiddle
HTML
<script src="https://unpkg.com/vue@next"></script> <div id="product_form"> <h1>Product Add</h1> <div class="lines"> <custom-form></custom-form> // Change added (Moved send button inside custom-form component </div> </div> y el código js es
var productForm = Vue.createApp ({}) productForm.component('custom-form', { components: ['status-bar'], template: ` <label>Name<input type="text" v-model="this.product.name" @change="doSomething(this.product.name)"></label> <button v-on:click="submitProduct">Send</button><button v-on:click="closeStatus">Hide</button> <status-bar v-show="statusVisible" :outputData="outputData">{{outputData}}</status-bar> ` , // Change added data: function() { return { product: { name: 'asdf' }, outputData: '<div>Sample</div>', // Change added statusVisible: false // Change added } }, // Methods section added methods: { submitProduct() { this.statusVisible = true; }, closeStatus() { this.statusVisible = false; } } }) productForm.component('status-bar', { props: ['outputData'], template: '<p v-html="outputData"></p>', data(){ return { outData: '' // Change added } }, methods: { doSomething (data) { this.outData = data console.log(this.outputData) } } }) const vm = productForm.mount('#product_form')