javascript - 如何在 vue.js 中复制我的组件？

Question

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

Answer 1

最好的方法是使用v-for内部的组件。

单击按钮时增加索引。

不要忘记在v-for中使用key

工作 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>