Блог

Я хочу отобразить данные элемента ввода «пользовательской формы» в дочернем компоненте «строка состояния» после нажатия кнопки «Отправить», но при нажатии кнопки просто ничего не происходит. Есть идеи, почему? Пожалуйста, смотрите ссылку ниже.

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

Также проверьте приведенные ниже изменения для обоих template js . Вы сможете понять поток, когда сравните приведенное ниже с вашим 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>
 

и js код

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