Vue Vuelidate to validate unique value based on data from server

Question

I am trying to create a form with vuelidate. In one field I would like to check if the name is taken or not. I have some async methods to get names and ids from the server and assigning them to arrays, and I have a custom validator that checks if the name exists, either by checking the includes in the array, or by checking a computed value that already checks the array.

Neither of the methods seems to work however. If I check the array, its seems to be empty since it always returns false (even tho the array has values according to the vue tools in the browser). If I check the the computed value, I get an error with undefined.

So my question is, what is the simplest why to validate whether a value exists, and why isn't my current code wokring?

<template>
    <div>
        <form class="needs-validation" @submit.prevent="submitForm" method="post">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label">Name:</label>
                    <div class="col-sm-10">
                        <input 
                            type="text" 
                            class="form-control" 
                            :class="{ 'is-invalid': $v.form.name.$error }"
                            id="name" 
                            placeholder="enter name" 
                            v-model="form.name">
                        <span 
                            class="text-danger" 
                            v-if="!$v.form.name.required && $v.form.name.$dirty">name is required</span>
                        <span 
                            class="text-danger" 
                            v-if="!$v.form.name.isUnique && $v.form.name.$dirty">name not unique</span>
                    </div>
                </div>
        </form>
    </div>
</template>

<script>

import { required } from 'vuelidate/lib/validators'

const isUnique = (value, vm) => {
    if (value === '') return true
    if (vm.names) return !vm.names.includes(value)
    return true
}

export default {
    data() {
        return {
            form: {
                name: ""
            }
            ids: [],
            names: []
        }
    }
    validations: {
        form: {
            name: {
                required,
                isUnique
            }
        }
    }
    async created() {
        try {
            const response = await this.$http.get('/get_data/?fields=id,name')
            var array_id = []
            var array_name = []
            for (var data of response.data) {
                array_id.push(data['id'])
                array_name.push(data['name'])
            }
            this.ids = array_id
            this.names = array_name
        }
    }
}

<script>

Answer 1

Seem like you miss the right way to write down methods

        form: {
            name: {
                required,
                isUnique : this.isUnique
            }
          }
        },
        methods: {
          isUnique = (value, vm) => {
            if (value === '') return true
            if (vm.names) return !vm.names.includes(value)
              return true
          }
        }