如何在 vue-cli 中更新或显示数组的数据答案

【问题标题】：How to update or show data of array in vue-cli如何在 vue-cli 中更新或显示数组的数据
【发布时间】：2022-01-06 18:43:37
【问题描述】：

我创建了一个表格，显示用户输入的产品数据，并为操作、删除、修改和详细信息放置了一列，但我不知道如何在另一个页面上编辑或显示特定行？

这是我的桌子

<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>

这就是输入数据的保存方式

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

【问题讨论】：

标签： javascript vue.js vuejs3 vue-cli-3

【解决方案1】：

您必须将项目对象或其 id 连续传递给编辑方法，然后使用带有参数作为 id 的路由器推送语句将您引导到新页面。在已挂载的生命周期挂钩中使用商店或 API 中的 ID 获取对象详细信息的位置

【讨论】：