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

Posted 2023-02-16

【中文标题】根据父 vue 中单击事件的索引删除输入

【英文标题】：delete input based on index of a click event from parent vue

【发布时间】：2021-12-08 23:00:50

【问题描述】：

我正在使用 BootstrapVue。

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

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

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

添加 3 个输入 打开每个 Input 并在其中写入一个数字，例如 Input 1 -> 1111、Input 2 -> 2222 和 Input 3 -> 3333（您也可以添加更多 Input Informations，但在这里并不真正相关） 例如删除第二个输入，通常它现在应该像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>

【参考方案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 -

这对我来说效果很好！

【参考方案2】：

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

【讨论】：

这行不通！ - 它仍然具有与我在编号 3 的问题中声明的相同的输出...