<div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
        {{ item.val }} --- {{ item.kk }}
      </router-link>
    </div>

 <div>
    <form @submit.prevent="updateData">
      <label>Val:</label><br />
      <input
        type="text"
        id="val"
        name="val"
        @input="val = $event.target.value"
        :value="currentItem.val"
      /><br />
      <label>kk:</label><br />
      <input
        type="text"
        id="kk"
        name="kk"
        @input="kk = $event.target.kk"
        :value="currentItem.kk"
      /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </div>
  
  export default {
  name: "User",
  data: function () {
    return {
      val: "",
      kk: "",
    };
  },
  props: {
    items: {
      required: true,
      default: () => {},
    },
  },
  computed: {
    currentItem() {
      return this.items[this.$route.params.id];
    },
  },

  methods: {
    updateData() {
      const updatedItems = [...this.items];
      updatedItems[this.$route.params.id] = {
        ...this.currentItem,
        kk: this.kk || this.currentItem.kk,
        val: this.val || this.currentItem.val,
      };
      this.$emit("update", updatedItems);
      this.$router.push("/");
    },
  },

I am able to dynamically update the data, but small issue is like, When trying to update data. I have two fields called val, kk when i entered details and click on submit button. Then only one field is updating. out of two fields?

I think issue with updateData method

code link:- https://codesandbox.io/s/damp-wildflower-sie0h?file=/src/components/HelloWorld.vue

CodePudding user response：

look your code at $event.target.kk , what is kk ? update: $event.target.value will is ok, online: https://codesandbox.io/embed/exciting-shape-duods?fontsize=14&hidenavigation=1&theme=dark