Как запретить пользователю отправлять текст, который уже существует в удаленном API?

Question

Я создаю приложение VueJS, которое содержит список имен с именем divisions. Пользователь может отправить новое имя для подразделения, а также может обновить имя подразделения. Имена подразделений принимаются от удаленного API, и любые сделанные изменения затем также отправляются в API через запрос PUT. Это хорошо работает.

Однако проблема заключается в том, как я могу запретить пользователю отправлять имя подразделения, которое уже существует ?

У меня есть родительский компонент (с именем 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)
  }

Answer 1

У вас уже есть все подразделения в родительском компоненте, вы можете передать это как реквизиты дочернему компоненту

А в дочернем компоненте до onSubmitUpdate вы можете использовать два подхода здесь

1) вы можете отключить кнопку обновления по умолчанию и выполнить проверку для деления ввода, добавив событие @input -> проверить деление, если оно уже существует, если не активировать кнопку

<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) Вы можете напрямую добавить условие в метод onSubmitUpdate, чтобы проверить, существует ли уже разделение редактирования, оно не вызовет обновление api

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