使用vuejs单击“删除”按钮时删除特定的HTML div

Question

所以我有一些重复的输入字段来填充不同的数据。每重复一次，我也有一个删除按钮。如果单击此delete按钮，则应删除与此delete按钮相关的所有输入字段。但是这个删除按钮不起作用。

<div v-for="index in 10" class="form-group row" for="switch-id2" v-if="isShow2">
    <br><br>

    <div class="col-md-2">
        <b-form-fieldset>
            <label>Pincode</label>
            <div id="app">
                <treeselect placeholder="Enter the pincode(s)" :options="options" :value="value"
                    :multiple="multiple">
                    <div slot="value-label" slot-scope="{ node }">{{ customLabel }}</div>
                </treeselect>
                <p>
                    <label><input type="checkbox" v-model="multiple">Multi-select</label>
                </p>
            </div>
        </b-form-fieldset>
    </div>
    <div class="col-md-2">
        <label>Supply Chain</label>
        <b-input-group>
            <select class="form-control" id="supplyChain" name="supplyChain" v-model="supplyChain">
                <option selected value="">Select</option>
                <option value="b2bRegular">Dummy</option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>ODA category</label>
        <b-input-group>
            <select class="form-control" id="odaCategory" name="odaCategory" v-model="odaCategory">
                <option selected value="">Select</option>
                <option value="nonODA">Default</option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>ODA TAT</label>
        <b-input-group>
            <select class="form-control" id="odaTat" name="odaTat" v-model="odaTat">
                <option selected value="">Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>FM Facility</label>
        <b-input-group>
            <select class="form-control" id="fmFacility" name="fmFacility" v-model="fmFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2">
        <label>LM Facility</label>
        <b-input-group>
            <select class="form-control" id="lmFacility" name="lmFacility" v-model="lmFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2" style="margin-top:-2em; margin-left:0em">
        <label>RTO Facility</label>
        <b-input-group>
            <select class="form-control" id="rtoFacility" name="rtoFacility" v-model="rtoFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <div class="col-md-2" style="margin-top:-2em; margin-left:0em">
        <label>RVP Facility</label>
        <b-input-group>
            <select class="form-control" id="rvpFacility" name="rvpFacility" v-model="rvpFacility">
                <option value=""></option>
            </select>
        </b-input-group>
    </div>
    <b-button type="button" class="btn btn-danger" title="Delete pincode" style="font-size: 20px;"
        onClick=""><i class="fa fa-trash"></i>
    </b-button>
</div>

JS代码

import CryptoJS from 'crypto-js';
import VueElementLoading from 'vue-element-loading';
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'dummy',
  components: { VueElementLoading, Treeselect },
  data() {
    return {
      isShow2: true,
      multiple: true,
      value: null,
      options: [203207, 234567, 324353, 201301, 201303, 122413].map(i => ({
        id: i,
        label: `${i}`,
        customLabel: `Custom Label ${i}`,
      })),
    }
  },
  props: {
    msg: String,
  },
  mounted() {

  },
  methods: {
    thisFileUpload() {
      document.getElementById("file").click();
    }
}
}

在图片中，如果我点击红色删除按钮，然后平码，供应链，官方发展援助TAT，FM设施，LM设施，RTo设施，RVP设施输入字段应该被删除。

​

​

Answer 1

在上述注释中的讨论中，我不理解您试图单独控制单个行的可见性。

基本答案仍然相同:让您的“删除”按钮设置一个状态变量，并使用该状态变量控制要删除的元素的可见性。

区别在于，如果你控制十个不同事物的可见性，你需要十个不同的状态变量。

通常，状态数据已经处于数组结构中，因为您可能希望在每一行中放置不同的数据，而不是这种快捷方式。

<div v-for="index in 10" ...>

你会有这样的

data() {
    return {
      rowData: [
         {isShown: true, /* other data for this row here */},
         {isShown: true, /* other data for this row here */},
         {isShown: true, /* other data for this row here */},
         /* ...and so on */
      ],

您的呈现循环将迭代该rowData数组(记住不应该有v-for和v-if 在同一元素上)：

<template v-for="(row, index) in rowData">
  <div v-if="row.isShown">
    /* ... */
    <button v-click="hideRow(index)">Delete</button>
  </div>
</template>

每行中的delete按钮可以将当前行索引传递给单击处理程序，这样处理程序就知道要更新isShown的哪个元素(通过用新的数组替换rowData，rowData[index].isShown是false)。