component

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

    {{ $route.params.id }}
  </div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  components: {},
  data() {
    return {
      items: [
        { id: 0, val: "1", kk: "mm" },
        { id: 1, val: "22", kk: "aa" },
        { id: 2, val: "55", kk: "dd" },
        { id: 3, val: "77", kk: "gg" },
      ],
    };
  },
  methods: {
    updateValue(value) {
      console.log("updating...");
      console.log(value);
      this.items = value;
    },
  },
};
</script>

User component which need to udate

<template>
  <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.value"
        :value="currentItem.kk"
      /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </div>
</template>

<script>
export default {
  name: "User",
  props: {
    items: {
      required: true,
      default: () => {},
    },
  },
  data: function () {
    return {
      val: "",
      kk: "",
    };
  },
  computed: {
    currentItem() {
      return this.items[this.$route.params.id];
    },
  },
  methods: {
    updateData() {
      console.log("ssss");
      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("/");
    },
  },
};
</script> 

Using props how to update the data in Vuejs?

I have two components called, helloworld, User. And i have mocked the data inside of helloworld.vue. Now using the props the want to get he data inside of the User component and preform the update operation . When trying to preform the logic.

Where onclick of button. it is going to method, But not updating the logic

I have kept console. inside method. and its printing. but logic not updating

Code:- https://codesandbox.io/s/sleepy-jang-fwm11?file=/src/components/User.vue

CodePudding user response：

As mentioned in the comments you are getting errors in the console as you are not passing the items as props to the User component and it is a required field in the User component.

And for the second point, you should store data in a separate file not in the main component so the items array doesn't get initialized again when the parent component is rendered again. The best option would be a global store(vuex) for sake of simplicity, it is done a separate file for now just as an example.

Here is a sample sandbox hope it helps:

https://codesandbox.io/s/exciting-ptolemy-35bsb?file=/src/components/User.vue