<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>
-
I just need function to make component duplicate thanks!!Davis Vue.js Developer– Davis Vue.js Developer2022-01-07 06:32:58 +00:00Commented Jan 7, 2022 at 6:32
-
Donot paste the screenshot of the code. Instead paste the code itselfNitheesh– Nitheesh2022-01-07 06:49:22 +00:00Commented Jan 7, 2022 at 6:49
-
<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>Davis Vue.js Developer– Davis Vue.js Developer2022-01-07 06:52:48 +00:00Commented Jan 7, 2022 at 6:52
Add a comment
|
2 Answers
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>4 Comments
Davis Vue.js Developer
I did as you said but still the component appears just once. I'm beginner for Vue hope u understand thanks!
Nitheesh
Click the
Add row button. Can you check the above fiddle? Its working as you saidDavis Vue.js Developer
I'm in development environment of project, there was an error with template when I was running
Nitheesh
The overall implementation of the code is with this logic itself. Fixt the template error and try to integrate this logic in your code.
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++
}
