Vue 3 中如何实时更新列表显示新增商品 - 响应式数据应用 - 常规

在 Vue 3 中，你可以使用响应式数据来实时更新列表显示新增商品。具体步骤如下：

创建一个空数组，用于存储商品列表数据。

data() {
  return {
    productList: []
  }
}

在提交新增商品的函数中，将新增的商品数据添加到商品列表数组中。

methods: {
  addProduct(newProduct) {
    // 将新增的商品添加到商品列表数组中
    this.productList.push(newProduct);
  }
}

在列表组件中，使用v-for指令循环渲染商品列表数据。

<template>
  <div>
    <ul>
      <li v-for="product in productList" :key="product.id">
        {{ product.name }}
      </li>
    </ul>
  </div>
</template>

这样，当你提交新增商品后，商品列表数组会更新，列表也会实时显示新增的商品。