This is my PhoneLineNumberComponent. Everything is working perfectly, but I'd like to have the child component form loaded when the user clicks the button on the parent component. The PhoneLineNumberComponent is the child component, and the ButtonComponent is the parent component.
<template>
<div>
<form v-for="(line,index) in lines" v-bind:key="index">
<div class="form-group">
<div class="col-lg-6">
<div class="row">
<div class="form-group">
<input v-model="line.number"
float-label="Phone Number"
numeric-keyboard-toggle
placeholder="5551234567"
type="text"
class="form-control"
value="" />
</div>
</div>
</div>
<button type="button" v-if="index + 1 === lines.length" @click="addLine">Add</button>
<button type="button" @click="removeLine(index)">Delete</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: 'PhoneNumberLineComponent',
data() {
return {
lines:[],
blockRemoval: true,
index:[],
}
},
watch: {
lines() {
this.blockRemoval = this.lines.length <= 1
}
},
methods: {
addLine() {
let checkEmptyLines = this.lines.filter(line => line.number === null)
if (checkEmptyLines.length >= 1 && this.lines.length > 0) return
this.lines.push({
countryCode: null,
number: null,
})
},
removeLine(lineId) {
if (!this.blockRemoval) this.lines.splice(lineId, 1)
}
},
mounted() {
this.addLine()
}
}
</script>
<style scoped>
</style>
This is my ButtonComponent. When the user clicks the button on the ButtonComponent, the PhoneLineNumber child component should be triggered.
<template>
<div>
<PhoneNumberLineComponent></PhoneNumberLineComponent>
</div>
</template>
<script>
import PhoneNumberLineComponent from './PhoneNumberLineComponent';
export default {
name:'ButtonComponent',
components: {
PhoneNumberLineComponent
},
data() {
return {
lines: [],
blockRemoval: true,
index:[],
}
},
};
</script>
<style scoped>
</style>