专利新增页面有专利详情和发明人信息,其中发明人信息是list,发明人信息是单独的vue组件,,后是一个接口,前端怎么实现新增功能

要实现专利新增页面中发明人信息的新增功能，您可以在发明人信息组件中添加一个“新增”按钮，并在点击该按钮时向后端发送新增发明人的API请求。具体实现步骤如下：

1. 在发明人信息组件中添加一个“新增”按钮：

<template>
  <div>
    <div v-for="(inventor, index) in inventors" :key="index">
      <input v-model="inventor.name" type="text" placeholder="发明人姓名">
      <input v-model="inventor.phone" type="text" placeholder="发明人电话">
      <input v-model="inventor.email" type="text" placeholder="发明人邮箱">
    </div>
    <button @click="addInventor">添加发明人</button>
    <button @click="submitInventor">新增</button>
  </div>
</template>

2. 实现发明人信息组件中的“新增”按钮的点击事件：

methods: {
  addInventor() {
    this.inventors.push({ name: '', phone: '', email: '' })
  },
  submitInventor() {
    axios.post('/api/inventors', {
      // 将新增的发明人信息提交到后端
      inventors: this.inventors
    }).then(() => {
      // 新增成功后，重置发明人信息列表
      this.inventors = [{ name: '', phone: '', email: '' }]
    }).catch(error => {
      console.log(error)
    })
  }
}

3. 在专利详情组件中引入发明人信息组件，并将获取到的发明人信息传递给发明人信息组件：

<template>
  <div>
    <h2>专利详情</h2>
    <!-- 其他专利详情的表单项 -->
    <inventor-info :inventors="inventors" />
  </div>
</template>

<script>
import InventorInfo from './InventorInfo.vue'

export default {
  components: {
    InventorInfo
  },
  data() {
    return {
      inventors: []
    }
  },
  created() {
    // 获取发明人信息
    axios.get('/api/inventors').then(response => {
      this.inventors = response.data
    }).catch(error => {
      console.log(error)
    })
  }
}
</script>

这样，当用户在新增发明人信息组件中点击“新增”按钮时，就会向后端发送新增发明人的API请求，并在新增成功后重置发明人信息列表。