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