<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>
uj5u.com熱心網友回復：
最好的方法是使用里面的組件v-for。
單擊按鈕時增加索引。
不要忘記在key里面使用v-for
作業小提琴
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>uj5u.com熱心網友回復：
您可以在資料物件中添加一個屬性并將 v-for 用于渲染按鈕。讓方法 duplicateEl 更改屬性值。
<v-btn v-for="item in btnNumber" ....>
duplicateEl(){
this.btnNumber
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406896.html
標籤：
上一篇：通過vue中的計算屬性過濾資料