如何使 Vue.js 3 中动态生成的按钮不执行相同的功能

Question

我正在创建一个输入灵活性至关重要的应用程序。我的应用程序动态生成内容（输入、文本区域、按钮）。 this picture 显示用边界线与顶部分开的底部部分是动态生成的

我想要做的是，当我点击灰色加号按钮时，它应该生成一个额外的导演姓名，以及特定部分的导演地址字段（由灰线分隔）。不幸的是，我的应用程序一直在为所有部分添加（和删除）导演姓名和导演地址字段，而不是单击灰色按钮（或单击红色按钮）的部分 see here。可以在 Vue.js 中实现吗？ I.m 在我的 Vue.js 代码中使用 'add_new_director_field()' 函数来添加上述字段。在此先感谢好人。请参阅下面的代码：

<script>
import NavBar from './VettingReportMenu.vue';
import BreadCrumb from './BCRPreviousDirectors.vue';
import SideLinkPreviousDirectors from './SideLinkPreviousDirectors.vue';
export default {
    data() {
        return{
            header_1: "Previous Directors",
            count: 0,
            disabled: true,
            checked: false,
            isActive: true,
            inputs: [{
            director: "",
            }], 
            sec: []
        }
    }, 
    components:{
        NavBar, BreadCrumb, SideLinkPreviousDirectors
    },
    setup(){
        let myClass = "LeftLine";
        let counts = 1;
        return myClass, counts;
    },
    methods:{
        add_new_director_field(){
            this.inputs.push(this.inputs.length+1);
        },
        remove_director_field(index){
            this.inputs.splice(index, 1)
        },
        add_new_section(){
            this.count++;
            this.isActive = false;
            this.sec.push({
                director: ''
            });
        },
        remove_section(index){
            this.count--;
            if(this.count == 0)
                this.isActive = true;
            this.sec.splice(index, 1)
        },
        trythis: function() {
        alert(this.counts);
        },
        
    }
}
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

<template>
    <div class="row">
        <div class="col-sm-12">
            <NavBar /> 
            <BreadCrumb />
            <br />
        </div>
    </div>
    <!-- This is the main div splitting the page into two (2) -->
    <div class="row">
        <div class = "col-sm-1"><!-- Left Space Section-->
        </div>

        <div class = "col-sm-8"><!-- Main Content Section -->
            <h2 style="border-bottom: 1px solid #DDDDDD">{{header_1}}</h2>
            <br />
            <div class="row">
                <div class="col-sm-3">
                </div>
                <div class="col-sm-6">
                    <div class="chiller_cb form-check-inline align-items-center">
                        <input id="addDirectorsHistory" type="checkbox" name="prev_dir_checkbox" value="Add Previous Directors" v-model="checked">
                        <label for="addDirectorsHistory"><strong>Check this box to fill this part, or click 'Save and Continue' to skip.</strong></label>
                        <span></span>
                    </div>
                </div>
                <div class="col-sm-3">
                </div>
            </div>
            <br />
            <!-- Here starts the section containing the previous directors -->
            <div v-if="checked"> <!-- Wrapper -->
                <!-- Buttons for Adding and Removing Previous Director's Section -->
                <div class="row">
                    <div class="col-sm-2">
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <button @click.self="add_new_section()"  class="btn shadow-sm btn-secondary btn-block rounded-2" id="add_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
                                    <i class="fas fa-plus-square" style="horizontal-align: left;"></i>
                                    Previous Director's Section
                                </button> 
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <button :disabled="isActive" @click="remove_section(count)"  class="btn shadow-sm btn-danger btn-block rounded-2" id="remove_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
                                    <i class="fas fa-minus-square" style="horizontal-align: left;"></i>
                                    Previous Director's Section
                                </button> 
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                    </div>
                </div>
                <!-- Buttons for Adding and Removing Previous Director's Section -->
                <br />
                <div v-for="(secs,k) in sec" :key="k" style="border-bottom:1px solid #b7b7b7">
                    <br />
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="row">
                                <div class="col-sm-12 align-middle">
                                    <strong>Heading for Previous Directors' Entry:</strong><b class="text-danger">*</b>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-heading" style="color: #8FBC8F"></i>
                                                </span>                    
                                            </div>
                                            <input placeholder="Heading for Previous Directors Entry"  class="form-control"   :name="'prev_dir_heading_' + k" required >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="row">
                                <div class="col-sm-12 align-middle">
                                    <strong>Appointed By Resolution Dated:</strong><b class="text-danger">*</b>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
                                                </span>                    
                                            </div>
                                            <input type="date"  class="form-control" placeholder="e.g. 2018"  name="resolution_date" required >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-3">
                            <div class="row">
                                <div class="col-sm-12 align-middle">
                                    <strong>Presented for Filing Dated:</strong><b class="text-danger">*</b>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
                                                </span>                    
                                            </div>
                                            <input type="date"  class="form-control"  name="filing_date" required >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                

                    <!-- The listing of Directors -->
                    <div :id="'c'+k+d" v-for="(input,d) in inputs" :key="k+d">
                        <div class="row"  >
                            <div class="col-sm-1">
                                <strong>{{d+1}}.</strong>
                            </div>
                            <div class="col-sm-11">
                                <div class="row">
                                    <div class="col-sm-12 align-middle">
                                        <strong>Director's Name:</strong><b class="text-danger">*</b>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-10">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-user-tie" style="color: #8FBC8F"></i>
                                                    </span>                    
                                                </div>
                                                <input v-model="input[d]" class="form-control" placeholder="e.g. Hassan Dele Ekene"  :name="'current_director_' + k + '_' + d" required >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <button :v-model="'remove_btn' + k + '' + d"  @click="remove_director_field(k + d)" type="button" v-show="d || ( !d && inputs.length > 1)" class="btn shadow-sm btn-danger btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
                                                    <i class="fas fa-minus-square" style="horizontal-align: left;"></i>
                                                </button> 
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-1">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <button :id="'add_btn' + k + '' + d"  :v-model="'add_btn' + k + '' + d" v-show="d == inputs.length-1" @click="add_new_director_field()" type="button" class="btn shadow-sm btn-secondary btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Add New Address Field">
                                                    <i class="fas fa-plus-square" style="horizontal-align: left;"></i>
                                                </button> 
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 align-middle">
                                        <strong>Director's Address:</strong><b class="text-danger">*</b>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-10">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        <i class="fas fa-map-marked-alt" style="color: #8FBC8F; margin-top: -30px"></i>
                                                    </span>                    
                                                </div>
                                                <textarea  class="form-control _textarea" :name="'dir_addr_' + k + '_' + d" 
                                                    maxlength="1000" placeholder="Director's Address" rows="2" required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br />
                </div>
            </div>
            <!-- End of listing -->

            <!-- Here ends the section containing the current directors -->

            <br />

            <div class="row">
                <div class="col-sm-3">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="input-group">
                                <button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
                                    <i class="fas fa-angle-double-left" style="horizontal-align: left;"></i>
                                    Back to Share Capital
                                </button> 
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                </div>
                <div class="col-sm-3">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="input-group">
                                <button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
                                    <i class="far fa-save"></i>
                                    Save and Continue
                                    <i class="fas fa-angle-double-right" style="horizontal-align: right;"></i>
                                </button> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class = "col-sm-3" ><!-- SideLink Section-->
            <div class="row myClass">
                <SideLinkPreviousDirectors />
            </div>
        </div>
    </div>
<br />
<br />
</template>

Answer 1

您的 add_new_director_field 方法中没有指示应添加哪个部分的输入。很难从您的代码中理解发生了什么。我建议首先从设计数据结构开始，然后再进行标记。非常快速和简化的草稿怎么可能：

const inputsGroup = [
 {
    type: 'text',
    value: 'Name',
 }, 
 {
    type: 'text',
    value: 'Address',
 }, 
]

data() {
  return {
    sections: [
      {
        inputs: [inputsGroup]
      },
    ]
  }
}

...

addSection() {
  this.sections.push({ inputs: defaultInputs })
}

removeSection(index) {
   this.sections.splice(index, 1)
}

addInputs(sectionIndex) {
  this.sections[sectionIndex].inputs.push(inputsGroup)
}

deleteInputs(index, sectionIndex) {
  this.sections[sectionIndex].inputs.splice(index, 1)
}

<template>
  <button
    @click="addSection"
  >
    Add section
  </button>
  <div v-for=(section, sectionIndex) in sections>
  
    <div v-for="(inputGroup, inputGroupIndex) in section.inputs">
      <input
        v-for="input in inputGroup"
        :value="input.value"
        :type="input.type"
      >
     
      <button
        @click="deleteInputs(inputGroupIndex, sectionIndex)"
      >
        Delete inputs
      </button>
    </div>

    <button
      @click="addInputs(sectionIndex)"
    >
      Add inputs
    </button>

    <button
      @click="deleteSection(sectionIndex)"
    >
      Delete section
    </button>

  </div>
</template>

如何使 Vue.js 3 中动态生成的按钮不执行相同的功能

How can you make dynamically generated buttons in Vue.js 3 not executing the same function

vue.js

laravel-8