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

Question

所以我有一些重复的输入字段来填充不同的数据。对于每次重复，我还有一个删除按钮。如果我点击这个删除按钮，那么所有与这个删除按钮相关的输入字段都应该被删除。但是这个删除按钮不起作用。

HTML

<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();
    }
}
}

在图中，如果我点击红色的删除按钮，那么 Pincode、Supply chain、ODA TAT、FM facility、LM facility、RTo facility、RVP facility 输入字段应该被删除。

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 on the same element）：

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

每行中的删除按钮可以将当前行索引传递给点击处理程序，因此处理程序知道要更新哪个元素（通过 replacing rowData with a new array，其中 rowData[index].isShown 是 false.)

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

Remove specific HTML div when click on delete button using vuejs

html

javascript

css

frontend

vue.js