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

Question

我正在使用 BootstrapVue。

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

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

如果您想尝试它，请执行以下操作（您可以复制粘贴代码并运行它）：

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

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

非常感谢！

更新:

错误是我的parent.vue里面的index删了东西后变了，但是我的child.vue里面没有删正确的[=22] =] 并且也没有重新创建所有其他 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>

我的child.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

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

Answer 2

简单的回答。

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

我的模板中的更改： 将 :key 设置为 id.id（我将在我的脚本中创建）并在单击我的 [=15= 后通过] 我的 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 -

这对我很有效！

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

delete input based on index of a click event from parent vue

javascript

components

vue.js

vuejs2