vuetify 양식에서 API를 호출하는 사용자 지정 유효성 검사를 추가하는 방법은 무엇입니까?

예, 이름이 이미 존재하거나 중복 된 이름이있는 경우 API 호출로 고객 입력에서 이름을 검증하고 사용자에게 오류를 던질 수 있습니다.

vuetify 텍스트 필드에서 rules 속성을 사용할 수 있으며 함수 배열을 취하고 true (유효성 검사 true, 케이스 이름이 존재하지 않음) 또는 string (valdation false 인 경우 db에 이름이 있음)을 기대합니다.

작동중인 코드 펜은 다음과 같습니다. https://codepen.io/chansv/pen/eYYdPzQ?editors=1010

<div id="app">
  <v-app id="inspire">
      <v-form
        ref="form"
        v-model="valid"
      >
        <v-text-field
          v-model="name"
          :counter="10"
          :rules="[checkDuplicate, rules.required]"
          label="Name"
          required
        ></v-text-field>
        <v-btn @click="submitbtn">submit</v-btn>
      </v-form>
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    valid:true,
    name: '',
    rules: {
      required: v => !!v || 'this field is required',
    }
  }),
  methods: {
    checkDuplicate(val) {
      // write your api call and return the below statement if it already exist
      if (val == 'test') {
        return `Name "${val}" already exist`;
       } else {
         return true;
       }

    },
    submitbtn() {
      this.$refs.form.validate();
    },
  },
})