<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>El mejor enfoque es usar el componente dentro v-for .
Incrementa el índice cuando se hace clic en el botón.
No olvides usar la key dentro del v-for
violín de trabajo
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>Puede agregar una propiedad en el objeto de datos y usar v-for para los botones de procesamiento. Deje que el método dupliqueEl cambie el valor de la propiedad.
<v-btn v-for="item in btnNumber" ....> duplicateEl(){ this.btnNumber++ }