vue怎么把表单的数据添加到表格

在Vue中，将表单数据添加到表格通常涉及到以下步骤：

1. 在组件的data函数中定义一个数组，用来存储表格的数据项。
2. 创建一个表单，用户可以在表单中输入数据。
3. 监听表单的提交事件，在事件处理函数中获取表单输入的数据。
4. 将输入的数据添加到之前定义的数组中。
5. 在表格中使用v-for指令渲染数组，动态生成表格行。

下面是一个简单的例子来说明这个过程：

<template>
  <div>
    <!-- 表单 -->
    <form @submit.prevent="addFormData">
      <input v-model="newEntry.name" placeholder="名称" />
      <input v-model="newEntry.price" placeholder="价格" />
      <button type="submit">添加</button>
    </form>
    
    <!-- 表格 -->
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="entry in entries" :key="entry.id">
          <td>{{ entry.name }}</td>
          <td>{{ entry.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 存储表格数据的数组
      entries: [],
      // 新表单项数据
      newEntry: {
        name: '',
        price: '',
        id: null
      }
    };
  },
  methods: {
    // 表单提交时调用的方法
    addFormData() {
      // 假设我们有一个生成id的方法，例如使用 UUID 或者简单地使用数组长度
      this.newEntry.id = this.entries.length;
      // 将新数据添加到数组中
      this.entries.push({ ...this.newEntry });
      // 清空表单输入
      this.newEntry.name = '';
      this.newEntry.price = '';
    }
  }
};
</script>

在上述代码中：

- `entries` 数组用于存储表格中的数据项。
- `newEntry` 对象用于临时存储用户输入的表单数据。
- 表单中的 `input` 元素使用 `v-model` 指令与 `newEntry` 的属性进行双向绑定，这样表单中的数据更新会反映到 `newEntry` 对象中。
- 表单提交时，调用 `addFormData` 方法，该方法将 `newEntry` 添加到 `entries` 数组中。
- 使用 `v-for` 指令遍历 `entries` 数组，动态生成表格的每一行。