从你贴的代码片段来看，已经用上了Vue的v-model来绑定输入，那咱们就基于Vue来实现最顺畅的方案，同时也给你准备了纯原生JS的版本，按需选择~

方案一：Vue环境下的实现（推荐，匹配你现有代码） #

首先补全你的HTML结构，加上按钮和展示区域：

<div id="app">
  <table style="width:100%" id="intake">
    <tr>
      <td><label for="firstName">First Name: </label></td>
      <td><input type="text" name="firstName" id="firstName" v-model="formData.firstName"></td>
    </tr>
    <tr>
      <td><label for="lastName">Last Name: </label></td>
      <td><input type="text" name="lastName" id="lastName" v-model="formData.lastName"></td>
    </tr>
    <!-- 后续加其他字段的话，直接在这里扩展行就行 -->
  </table>
  <button @click="addService">Add Service</button>

  <!-- 用来展示已添加的JSON数据 -->
  <div class="services-list">
    <h3>已添加的服务信息</h3>
    <div v-for="(service, idx) in services" :key="idx">
      <pre>{{ JSON.stringify(service, null, 2) }}</pre>
    </div>
  </div>
</div>

然后写Vue的核心逻辑，完成「转JSON→添加到页面→可选提交后端」的流程：

new Vue({
  el: '#app',
  data() {
    return {
      formData: {
        firstName: '',
        lastName: ''
        // 对应新增的表单字段，在这里同步添加属性
      },
      services: [] // 存所有已添加的JSON对象
    }
  },
  methods: {
    addService() {
      // 先做个简单的必填项验证，避免空数据提交
      if (!this.formData.firstName.trim() || !this.formData.lastName.trim()) {
        alert('请填写所有必填字段！');
        return;
      }

      // 深拷贝表单数据，避免后续修改表单影响已保存的记录
      const serviceJson = JSON.parse(JSON.stringify(this.formData));

      // 把JSON对象添加到页面展示列表
      this.services.push(serviceJson);

      // 👇 如果需要提交到本地后端接口，取消下面的注释，替换成你的接口地址
      /*
      fetch('http://localhost:3000/api/services', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(serviceJson)
      })
      .then(res => res.json())
      .then(data => console.log('服务添加成功：', data))
      .catch(err => console.error('添加失败：', err));
      */

      // 清空表单，方便下一次输入
      this.formData = { firstName: '', lastName: '' };
    }
  }
});

关键细节说明 #

• 把表单数据统一放在formData对象里，既符合Vue响应式的最佳实践，也能直接转成JSON
• 用JSON.parse(JSON.stringify())做深拷贝，是因为如果直接存this.formData的引用，后续修改表单会把已添加的记录也改掉，这个坑一定要注意
• 用<pre>标签展示JSON，能保留格式化后的缩进，比普通文本好读太多

方案二：纯原生JavaScript实现（如果不用Vue） #

如果你只是普通的静态HTML页面，用原生JS也能搞定：

<table style="width:100%" id="intake">
  <tr>
    <td><label for="firstName">First Name: </label></td>
    <td><input type="text" name="firstName" id="firstName"></td>
  </tr>
  <tr>
    <td><label for="lastName">Last Name: </label></td>
    <td><input type="text" name="lastName" id="lastName"></td>
  </tr>
</table>
<button onclick="addService()">Add Service</button>
<div id="servicesContainer">
  <h3>Added Services</h3>
</div>

<script>
function addService() {
  // 获取输入框的值
  const firstName = document.getElementById('firstName').value.trim();
  const lastName = document.getElementById('lastName').value.trim();

  // 验证必填项
  if (!firstName || !lastName) {
    alert('Please fill in all required fields!');
    return;
  }

  // 组装成JSON对象
  const service = { firstName, lastName };

  // 把JSON格式化后添加到页面
  const container = document.getElementById('servicesContainer');
  const preEl = document.createElement('pre');
  preEl.textContent = JSON.stringify(service, null, 2);
  container.appendChild(preEl);

  // 👇 同样，需要提交后端的话取消这段注释
  /*
  fetch('http://localhost:3000/api/services', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(service)
  })
  .then(res => res.json())
  .then(data => console.log('Success:', data))
  .catch(err => console.error('Error:', err));
  */

  // 清空表单
  document.getElementById('firstName').value = '';
  document.getElementById('lastName').value = '';
}
</script>

内容的提问来源于stack exchange，提问作者Mohan Aravind