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

Question

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

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

我有一个包含如下 GET 请求的父组件(名为 Divisions.vue):

  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)
  }
}

我在 apiService.js 中有这样的 api 服务 代码:

 updateDivision(division) {
    return this.getApiClient().put('/Divisions', division)
  }

Answer 1

你已经在父组件中有了所有的划分，你可以将它作为一个 props 传递给子组件

而在onSubmitUpdate之前的子组件中，这里可以有两种方式

1) you can disable the update button by default, and have validation for the input division by adding @input event -> check division if already exist, if not enable the button

<form @submit.prevent="onSubmitUpdate">

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

</form>

In Script: 

props: {
  divisions: Object,
},
data() {
    return {
      division: {
        division: '',
        division_id: null
      },
      btnDisable: true,
   }
}
methods: {
    divisionExists() {
      if (this.divisions.map(x => x.division).includes(this.division.division)){
        this.btnDisable = true
      } else {
        this.btnDisable = false;
      }
    },
    onSubmitUpdate() {
    ApiService.updateDivision(this.division)
  }
}

2) You can dirrectly add a condition in the onSubmitUpdate method to check if the edit division is already exist it will not trigger update api

onSubmitUpdate() {
if (!this.divisions.map(x => x.division).includes(this.division.division)){
            ApiService.updateDivision(this.division)
         }
    }