Подтвердить с помощью Vuelidate на полях Dynami c - PullRequest
Новая
       36

Подтвердить с помощью Vuelidate на полях Dynami c

0 голосов
/ 29 апреля 2020

У меня есть форма, которая динамически добавляет поля при событии щелчка. Я пытаюсь, чтобы ошибка проверки минимальной длины отображалась, когда значение поля меньше 9 цифр после того, как я изменил или размыл его (это не имеет значения). Моя проблема здесь заключается в том, что поскольку поля создаются динамически и, по сути, являются одной и той же v-моделью, он применяет правило ко всем из них. Как я могу заставить эту работу работать так, чтобы она влияла только на ту, на которой работает пользователь? Экран загружается с 10 из них, а затем они могут добавить больше. Поэтому, пока они заполняют первые 10 полей, я не хочу, чтобы после 5-го поля во всех следующих полях появлялась проверка, потому что 5-е поле не удалось.

Вот упрощенная версия моего кода 

<template>
    <div>
        <div>
            <button @click="onAddBarcodes">Add More</button>
        </div>
        <div v-for="(barcode, index) in barcodes" :key="index">
            <div>
                <div>
                    <label>Starting Roll #:</label>
                    <input
                        name="startbarcoderoll"
                        maxlength="9"
                        v-model.trim="$v.barcode.barcodeStart.$model"
                        :id="barcode.id"
                        ref="bcentry"
                    />
                    <!-- max length message -->
                    <div v-if="!$v.barcode.barcodeStart.minLength">
                        <span
                            v-if="!$v.barcode.barcodeStart.minLength"
                        >App Barcode must be exactly {{$v.barcode.barcodeStart.$params.minLength.min}} characters.</span>
                    </div>
                </div>
                <button @click="onDeleteBarcodes(barcode.id)">Remove</button>
            </div>
        </div>
    </div>
</template>

<script>
const { minLength } = require("vuelidate/lib/validators");

export default {
    data() {
        return {
            barcodes: [],
            barcode: {
                barcodeStart: ""
            }
        };
    },
    validations: {
        barcode: {
            barcodeStart: {
                minLength: minLength(9)
            }
        }
    },
    methods: {
        scanBarcodeNumber(value) {
            this.barcode.barcodeStart = value;
            this.$v.barcode.barcodeStart.$touch();
        },

        onAddBarcodes() {
            const newBarcode = {
                id: Math.random() * Math.random() * 1000,
                barcodeStart: ""
            };
            this.barcodes.push(newBarcode);
        },
        onDeleteBarcodes(id) {
            this.barcodes = this.barcodes.filter(barcode => barcode.id !== id);
        }
    }
};
</script>

Позвольте мне показать, что происходит

РЕДАКТИРОВАТЬ: Vuelidate установлен и создан в глобальном экземпляре Vue, поэтому я Можно использовать его в нескольких местах. Вот почему вы не видите его в этом конкретном коде

screenshot aftervalidation

1 Ответ

0 голосов
/ 29 апреля 2020

Используйте динамические проверки c с использованием функции validations и добавьте validation для каждого barcode.

Используйте $v[`barcode-${index}`] вместо $v.barcode для каждого поля: 

<template>
    <div>
        <div>
            <button @click="onAddBarcodes">Add More</button>
        </div>
        <div v-for="(barcode, index) in barcodes" :key="index">
            <div>
                <div>
                    <label>Starting Roll #:</label>
                    <input
                        name="startbarcoderoll"
                        maxlength="9"
                        v-model.trim="$v[`barcode-${index}`].barcodeStart.$model"
                        :id="barcode.id"
                        ref="bcentry"
                    />
                    <!-- max length message -->
                    <div v-if="!$v[`barcode-${index}`].barcodeStart.minLength">
                        <span
                            v-if="!$v[`barcode-${index}`].barcodeStart.minLength"
                        >App Barcode must be exactly {{$v[`barcode-${index}`].barcodeStart.$params.minLength.min}} characters.</span>
                    </div>
                </div>
                <button @click="onDeleteBarcodes(barcode.id)">Remove</button>
            </div>
        </div>
    </div>
</template>

В вашей js части определены validations с использованием function и определения штрих-кода для поля earch: 

export default {
  validations() {
    const rules = {};
    this.barcodes.forEach((item, index) => {
      rules[`barcode-${index}`] = {
        barcodeStart: {
          minLength: minLength(9),
        },
      };
    });
    return rules;
  },
};

Я не знаю, насколько это эффективный способ, но он должен работай как ты sh.

...