0

**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

  • 1
    Does this answer your question? [Pass data from child to parent in Vuejs (is it so complicated?)](https://stackoverflow.com/questions/43334796/pass-data-from-child-to-parent-in-vuejs-is-it-so-complicated) – sojin Jan 13 '22 at 04:06

0 Answers0