How can I duplicate my component in vue.js?-CodePudding

<template>
  <!--This is my main file -->
  <div id="inputs">
    <h1>언어 관리</h1>
    <v-btn color="primary" elevation="10" large @click="duplicateEl"
      >Add row</v-btn
    >
    <Contents />
  </div>
</template>
<script>
import Contents from "./Contents.vue";
export default {
  name: "LanguageMainMenu",
  components: { Contents },
  methods: {
    duplicateEl() {
      alert("You can duplicate buttons");
    },
  },
};
</script>
<style>
h1 {
  text-align: center;
  font-size: 38px;
  padding-top: 20px;
  margin: auto;
}
</style>

CodePudding user response：

You can add a property in data object and use v-for for render buttons. Let method duplicateEl to change the property value.

<v-btn v-for="item in btnNumber" ....>

duplicateEl(){
  this.btnNumber  
}

CodePudding user response：

The best apprach is to use the component inside v-for.

Increment the index when the button is clicked.

Dont forget to use key inside the v-for

Working Fiddle

var example1 = new Vue({
  el: '#app',
  name: "LanguageMainMenu",
  components: {
    Contents: {
      template: `<div>Contents Component</div>`,
    }
  },
  data() {
    return {
      totalCount: 1,
    }
  },
  methods: {
    duplicateEl() {
      this.totalCount  ;
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
    <!--This is my main file -->
    <div id="inputs">
      <h1>언어 관리</h1>
      <button @click="duplicateEl">Add row</button>
      <Contents v-for="count in totalCount" :key="`component-${count}`" />
    </div>
</div>