**This is my Child Component so I should bring language and content data to Parent Component ** **This is my Child Component so I should bring language and content data to Parent Component **
<template>
<div>
<v-row align="center">
<v-select
:items="languages"
v-model="language2"
outlined
solo
class="m-3"
cols="12"
sm="2"
label="Select Language"
></v-select>
<br />
<v-combobox
v-model="contents2"
outlined
solo
class="d-inline-flex"
cols="12"
sm="2"
label="Input Content"
></v-combobox>
</v-row>
<button @click="handleInput">Show language</button>
</div>
</template>
<script>
export default {
data() {
return {
val: "",
language2: [],
contents2: [],
additional: []
};
},
props: {
languages: Array,
contents: Array
},
methods: {
handleInput() {
this.additional = [this.language2, this.contents2];
alert(this.additional);
}
}
};
</script>
<style></style>
**And here is my Parent Element,Data is coming from main app and I should get all data from child component **
<template>
<div>
<form @submit.prevent>
<div id="parent">
<v-row align="center">
<v-col class="d-flex" cols="12" sm="3">
<v-select
:items="categories"
v-model="items"
outlined
label="Select Category"
></v-select>
</v-col>
<v-col class="d-flex" cols="12" sm="3">
<v-combobox
outlined
label="Input Key"
v-model="keys"
value="key"
></v-combobox>
</v-col>
<v-select
:items="languages"
v-model="language"
outlined
solo
class="d-flex"
cols="12"
sm="2"
label="Select Language"
></v-select>
<v-combobox
v-model="contents"
value="content"
outlined
solo
class="d-flex"
cols="12"
sm="2"
label="Input Content"
></v-combobox>
</v-row>
</div>
<v-row justify="end">
<v-col id="child" cols="6">
<Child
v-for="count in sec"
:key="count"
:languages="languages"
:contents="contents"
/>
</v-col>
</v-row>
<v-row justify="center" class="buttonRow">
<v-btn color="#96CEB4" @click="sec++" class="btnv"
><v-icon class="iconel">mdi-plus</v-icon>
</v-btn>
</v-row>
<v-row justify="center" class="buttonRow">
<v-btn color="primary" @click="onSubmit" class=""
><v-icon class="btn">Save</v-icon>
</v-btn>
</v-row>
</form>
</div>
</template>
<script>
export default {
components: {
Child: () => import("./Child.vue")
},
data() {
return {
sec: 0,
btnNumber: 1,
results: [],
items: [],
key: "",
language: [],
content: []
};
},
props: {
categories: Array,
keys: String,
languages: Array,
contents: String
},
methods: {
onSubmit() {
this.results = [
"categories:" + this.items,
"keys:" + this.keys,
"languages:" + this.language,
"contents:" + this.contents
];
console.log(this.results);
alert(this.results);
},
duplicateEl() {
this.btnNumber++;
},
getValue() {}
}
};
</script>
<style>
.space {
justify-content: center;
text-align: center;
margin: 10px 10px;
font-size: 22px;
color: yellow;
padding-bottom: 25px;
}
.buttonRow {
padding-bottom: 20px;
}
.btnv {
height: 45px;
width: 120px;
font-size: 28px;
border-radius: 20px;
}
.iconel {
font-size: 28px;
}
</style>
It would be great if anyone helps me out here thanks all