如何防止用户提交远程api中已经存在的文本？

Question

我正在创建一个VueJS应用，其中包含一个名为divisions的名称列表。用户可以为部门提交新名称，也可以更新部门名称。从远程api接收部门的名称，然后通过PUT请求将所做的任何编辑也发送到api。这很好。

问题是，如何防止用户提交已经存在]的部门名称？

我有一个父组件（命名为Divisions.vue），其中包含这样的GET请求：

  methods: {
    async getAllDivisions() {
      try {
        this.divisions = (await ApiService.getAllDivisions()).data
      } catch (error) {
        console.error(error)
      }
    }
  },
这是我在名为DivisionEdit.vue的文件中设置代码的方式>
模板HTML：

<form @submit.prevent="onSubmitUpdate">

    Division Name:
    <input type="text" v-model="division.division" />
    <button type="submit">
      Update Division
    </button>

</form>
脚本部分：

data() {
    return {
      division: {
        division: '',
        division_id: null
      },

methods: {
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

而且我有api服务
代码，例如apiService.js：

 updateDivision(division) {
    return this.getApiClient().put('/Divisions', division)
  }
我正在创建一个VueJS应用程序，其中包含一个称为除法的名称列表。用户可以为部门提交新名称，也可以更新部门名称。收到部门名称...

Answer 1

您已经在父组件中拥有所有的部门，您可以将其作为道具传递给子组件

并且在onSubmitUpdate之前的子组件中，您可以在这里有两种方法