CODEWITHSUNDEEP
vue.jsvuejs3
Norman
Norman

Reputation: 45

Vue 3 problems with value input

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>

Upvotes: 1

Views: 521

Answers (1)

huan feng
huan feng

Reputation: 8623

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

Upvotes: 1

Related Questions