根据父 vue 中单击事件的索引删除输入

Question

我正在使用 BootstrapVue。

单击parent.vue 中的按钮后，我想splice 我在child.vue 中的输入。

但每次我删除 parent.vue 中的某些内容时——我可以保证它正在工作——只有 child.vue 中的最后一个 Input 元素会被删除。

如果你想尝试一下（你可以复制粘贴代码并运行它）：

1. 添加 3 个输入
2. 打开每个 Input 并在其中写入一个数字，例如 Input 1 -> 1111、Input 2 -> 2222 和 Input 3 -> 3333（您也可以添加更多 Input Informations，但在这里并不真正相关）
3. 例如删除第二个输入，通常它现在应该像Input 1 -> 1111、Input 2 -> 3333 但它总是Input 1 -> 1111 和Input 2 is still 2222，因为它总是删除最后一个输入信息..

我该如何解决这个问题，正确的输入信息也会被删除？

非常感谢！

更新：

错误是我的parent.vue 中的index 在删除某些内容后发生了变化，但在我的child.vue 中它没有删除正确的index，也没有重新创建所有其他indexes

我的 parent.vue 中的代码：

<template>
  <div>
    <div class="inputArea mt-2" v-for="(id, indexParent) in inputs" :key="indexParent">
      <div class="col-md-12">
        <b-button-group>
          <b-button class="col-md-6" v-b-toggle="'newInput' + indexParent" variant="danger">Input</b-button>
          <b-button class="col-md-6" @click="deleteThis(indexParent)" variant="danger">Delete</b-button>
        </b-button-group>
      </div>

      <child :key="indexParent" :indexParent="indexParent" ref="ChildComponent" />
    </div>

    <div class="mt-3 mb-3 ml-3 mr-3">
      <b-button @click="addThis()" variant="success">Add Input</b-button>
    </div>
  </div>
</template>


<script>

import child from './child.vue'

export default {
  name: "parent",

  components: {
    child,
  },

  data() {
    return {
      inputs: [{}],
    };
  },

  methods: {
    deleteThis(indexParent) {
      this.inputs.splice(indexParent, 1);
      this.$refs.ChildComponent[indexParent].deleteThisFromParent(indexParent);
    },

    addThis() {
      this.inputs.push({});
    },
  },
};
</script>

我的孩子.vue：

<template>
  <b-collapse visible :id="'newInput' + indexParent" class="mt-2">
    <div v-for="(id, indexChild) in inputs" :key="indexChild">
    <table class="table table-striped mt-2">
      <tbody>
        <h5 class="ml-1">Input Informations</h5>
        <tr>
          <div class="mt-2">Input</div>
          <b-form-input></b-form-input>
        </tr>
      </tbody>
    </table>
    </div>

    <b-button @click="addInputInfo()">Add Input Informations</b-button>
  </b-collapse>
</template>



<script>
export default {
  name: "child",

  methods: {
    deleteThisFromParent(indexParent) {
      console.log(this.inputs); //Here I get the correct input which I want to delete
      console.log(indexParent); //correct index of parent.vue
      this.inputs.splice(); //here it deletes the last Input everytime.. 
    },

    addInputInfo() {
      this.inputs.push({});
    },
  },

  props: ["indexParent"],

  data() {
    return {
      inputs: [{}],
    };
  },
};
</script>

Answer 1

简单的答案。

在我的数组中设置一个唯一的 id 是解决方案！

我的模板中的变化： 将:key 设置为id.id（我将在我的脚本中创建）并在单击我的deleteButton 我的unique ID 后传递给方法。

<div class="inputArea mt-2" v-for="(id, indexParent) in inputs" :key="id.id">
  ....
  <b-button class="col-md-6" @click="deleteThis(id.id)" variant="danger">Delete</b-button>
  ....

</div>

脚本更改： 设置id: null，并给出第一个自动生成的输入 -> id = 0。之后转到方法并将splice 引用到index，这是我在使用map 搜索完整的array 后得到的。在addInput 中，每次单击我的按钮时，我都会设置唯一的 ID。

data() {
    return {
      id: null, 
      inputs: [{
        id: 0,
      }],
    };
  },

  methods: {
    deleteThis(id) {
      this.inputs.splice(id.id, 1);
    },

    addThis() {
      this.inputs.push({
        id: this.id += 1
      });
    },
  },

最后一步是将传递的值更改为我的child.vue：

<child :key="id.id" :indexParent="id.id"/>

之后，仍然包含indexParent 的所有内容都可以更改为id.id -

这对我来说效果很好！

Answer 2

在您的子组件中将 deleteThisFromParent() 中的this.inputs.splice(); 更改为this.inputs.splice(indexParent, 1)