Vue 3 problems with value input

Question

I have two components, the first one is a row insertion table and the second one contains the rows

I have a problem with the inputs, everything works fine except that when I delete a line in the middle of the table the values of the other inputs are reset,

the parent component :

<script>
import editortable from "./editortable.vue";
export default {
data: () => {
    return {
      elements: [{ id: 0, ref: "1", equation: "2" }],
      nextid: "1",
    };
  },
  methods: {
    removrow(index) {
      this.elements.splice(index, 1);
    },
    add() {
      this.elements.push({
        id: this.nextid++,
        ref: "",
      });
    },
  },
  

  components: {
    editortable,
  },
};
</script>

      <tbody>
          <tr
            is="vue:editortable"
            v-for="(element, index) in elements"
            :iden="element.id"
            :referen="element.ref"
            :eq="element.equation"
            :key="index"
            @delete="removrow(index)"
          ></tr>
        </tbody>
        <button type=" button" class="btn btn-primary" @click="add">
          Ajouter une ligne
        </button>

** component :**

<script>
export default {
  props: ["iden", "referen", "eq"],
  emits: ["delete"],
  methods: {
    deleterow() {
      this.$emit("delete");
    },
  },
};
</script>

<template>
  <tr>
    <td>
      <input class="form-control" type="ipunt" :value="iden" />
    </td>
    <td><input class="form-control" type="ipunt" :value="referen" /></td>
    <td><input class="form-control" type="ipunt" :value="eq" disabled /></td>
    <td>
      <button type="button" class="btn btn-danger" @click="deleterow">
        delete
      </button>
    </td>
  </tr>
</template>

huan feng · Accepted Answer · 2021-10-25 02:53:55Z

1

There is 1 obvious issue is you shouldn't use index as the key in your case. Change it to use the id.

:key="element.id"

And in removrow(id), using id find the index first and then remove it should be ok.

removrow(id) {
  const index = this.elements.findIndex(ele => ele.id === id);
  this.elements.splice(index, 1);
}

edited Oct 25, 2021 at 2:53

answered Oct 25, 2021 at 2:48

huan feng

8,7043 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 problems with value input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related