Vuelidate 如何用于限制文本输入的最小长度？

Question

如何使用 Vuelidate 来限制文本输入的最小长度？这是子组件的子组件。在代码中，minLength = 4。似乎必须创建方法来处理生成的 Vuelidate 对象才能处理任何表单错误？任何帮助将不胜感激。

console.log(this.$v.message_text.$params.minLength.min); 输出 4.

进行 Vuelidate 验证的 Vue 组件：

<template>
        <div>
        <input type="text" name="message_text" id="message_text"
            class="form-control"
            placeholder="New message"
            v-model="message"
            @keyup.enter.prevent="sendMessage">
        </div>
</template>

<script>

import { required, minLength } from "vuelidate/lib/validators";

export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
            message_text: ''
        };
    },


    validations: {
        message_text: {
          required,
          minLength: minLength(4)
        },
    },



    methods: {
        sendMessage() {
            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';

            console.log(this.$v.message_text.$params.minLength.min);

        }
    }
}
</script>

<style>
</style>

主 app.js 中存在以下行：

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

Answer 1

使用以下内容并在开始使用 vuelidate 文档时阅读一些内容。我认为 message_text 数据属性是多余的，或者不清楚你打算用它做什么。

<template>
        <div>
        <input type="text" name="message_text" id="message_text"
            class="form-control"
            placeholder="New message."
            v-model="$v.message.$model"
            @keyup.enter.prevent="sendMessage">
        </div>
</template>

<script>

import { validationMixin } from 'vuelidate'
    import {
        required,
        maxLength
    } from 'vuelidate/lib/validators'


export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
            message_text: ''
        };
    },


    validations: {
        message: {
          required,
           maxLength: maxLength(10)
        },
    },



    methods: {
        sendMessage() {
            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';
        }
    }
}
</script>

Answer 2

在此处找到答案：https://jsfiddle.net/b5v4faqf/ 必须创建一个方法来处理 Vuelidate 标识的表单错误。:

<template>
        <div>
        <input type="text"
            class="form-control"
            placeholder="New message."
            v-model="$v.message.$model"
            :class="status($v.message)"
            @keyup.enter.prevent="sendMessage">
            <pre>{{ $v }}</pre>
        </div>
</template>

<script>

import { required, minLength } from "vuelidate/lib/validators";

export default {
    props: ['activeChannel', 'username'],

    data() {
        return {
            message: '',
        };
    },


    validations: {
        message: {
          required,
          minLength: minLength(4)
        },
    },



    methods: {

        status(validation) {
            return {
            error: validation.$error,
            dirty: validation.$dirty
            }
        },

        sendMessage() {

            // if its still pending or an error is returned do not submit
            this.$v.message.$touch();
            if (this.$v.message.$error) return;

            let endpoint = `/channels/${this.activeChannel}/messages`;

            let data = {
                username: this.username,
                message: this.message
            };

            axios.post(endpoint, data);

            this.message = '';

        }
    }
}
</script>

<style scoped>

input {
  border: 1px solid silver;
  border-radius: 4px;
  background: white;
  padding: 5px 10px;
}

.dirty {
  border-color: #5A5;
  background: #EFE;
}

.dirty:focus {
  outline-color: #8E8;
}

.error {
  border-color: red;
  background: #FDD;
}

.error:focus {
  outline-color: #F99;
}


</style>

Vuelidate 如何用于限制文本输入的最小长度？

How can Vuelidate be used to limit the min length of a text input?

javascript

validation

vue.js

text

vuelidate