How to display input value in custom component dynamically after pressing button in Vue?-CodePudding

I want to display 'custom-form' input element data to child component 'status-bar' after pressing button 'Send', but when the button is pressed, simply nothing happens. Any ideas why? Please see link below.

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)
        }
    }
})

CodePudding user response：

Check the below changes for both template as well js. You will be able to understand the flow when you compare the below with your JSFiddle code

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>

and js code is

      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')