小编hob*_*_be的帖子

vue.js包装具有v模型的组件

我有一个第三方输入组件(一个vue文本字段)。

出于验证的原因,我更喜欢将此组件包装在我自己的包装中。

我的TextField.vue

<template>
    <v-text-field
            :label="label"
            v-model="text"
            @input="onInput"
            @blur="onBlur"
            :error-messages="this.getErrors(this.validation, this.errors)"
    ></v-text-field>
</template>

<script>
    import VTextField from "vuetify/es5/components/VTextField";
    import {vuelidateErrorsMixin} from '~/plugins/common.js';
    export default {
        name: "TextField",
        props: ['label', 'value', 'validation', 'errors'],
        mixins: [vuelidateErrorsMixin], //add vuelidate
        data: function() {
            return {
                'text': this.value
            }
        },
        components: {
            VTextField
        },
        methods : {
            onInput: function(value) {
                this.$emit('input', value);
                this.validation.$touch();
            },
            onBlur: function() {
                this.validation.$touch();
            }
        },
        watch: {
            value: {
                immediate: true,
                handler: function (newValue) {
                    this.text = newValue …
Run Code Online (Sandbox Code Playgroud)

components nested vue.js v-model

4
推荐指数
2
解决办法
1134
查看次数

标签 统计

components ×1

nested ×1

v-model ×1

vue.js ×1