How to update or show data of array in vue-cli

Question

I have created a table which display the product data that was entered by the user and I have placed a column for operations, delete, modify, and details, but what i don't know is how can I edit or display a particular row on another page?

this is my table

<tbody>
            <tr v-for="(item, index) in this.$store.state.pro" :key="item">
              <td class="cart_product">
                <router-link to=""
                  ><img :src="this.$store.state.img" width="70" alt=""
                /></router-link>
              </td>
              <td class="cart_description">
                <h4>
                  <router-link to="">{{ item.nName }}</router-link>
                </h4>
              </td>
              <td class="cart_description">
                <h4>
                  <router-link to="">{{ item.nSub }}</router-link>
                </h4>
              </td>
              <td class="cart_price">
                <p>{{ item.nPrice }}</p>
              </td>
              <td class="cart_description">
                <p>{{ item.nDate }}</p>
              </td>
              <td class="cart_delete">
                <router-link class="cart_quantity_delete" to=""
                  ><i @click="remove(index)" class="fa fa-times text-danger"></i
                ></router-link>
                <router-link class="cart_quantity_delete" to=""
                  ><i class="fa fa-pencil-square-o text-info"></i
                ></router-link>
                <router-link class="cart_quantity_delete" to="/details/index"
                  ><i class="fa fa-info-circle text-warning"></i
                ></router-link>
              </td>
            </tr>
          </tbody>

and this is how the entered data is saved

export default {
  name: "login",
  data: function () {
    return {
      name: "",
      price: "",
      sub: "",
      img: "",
      message: "",
      date: new Date(Date.now()).toLocaleString(),
    };
  },
  methods: {
    add: function () {
      var New = {
        nName: this.name,
        nPrice: this.price,
        nSub: this.sub,
        nImg: this.img,
        nDate: this.date,
      };
      this.name = "";
      this.price = "";
      this.sub = "";
      this.$store.state.pro.push(New);
      this.$router.push("/control-panel");
    },
  },
  components: { Header, Footer },
};

Faisal Nadeem · Accepted Answer · 2022-01-06 19:23:30Z

0

You have to pass item object or its id to edit method in a row and then use a router push statement with params as id which will route you towards new page. Where you get object details using ID from store or API in the mounted lifecycle hook

answered Jan 6, 2022 at 19:23

Faisal Nadeem

1196 bronze badges

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

Collectives™ on Stack Overflow

How to update or show data of array in vue-cli

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