0

描述错误

如果我使用<Form>标签 vee-validate 提供，组件插槽内的反应性就会丢失：

<template>
 <Form :validation-schema="schema" @submit="save">
    <div id="user">
        <div>
            <div >
                <Panel v-if="!$wait.is('user.get')">
                    <template #heading>
                        <div>
                            <h2 class="text-xl">{{ user.name ? user.name : 'New User' }}</h2> <-- reactivity is correct here
                            <ButtonGroup>
                                <template #content>
                                    {{ user }} <-- reactivity is lost here
                                </template>
                            </ButtonGroup>
                        </div>
                    </template>
                </Panel>
            </div>
        </div>
    </div>
 </Form>
</template>

这是 ButtonGroup 组件：

<template>
    <span class="button button-group button-shadowed" v-if="hasSlot('content', $slots)">
       <slot name="content"></slot>
    </span>
</template>
<script>

import {slots} from "../../../mixins/slots";

export default {
    mixins: [slots],
    name: "ButtonGroup",
}
</script>

如果我删除<Form>标签，一切都会按预期工作。

在内容中，我添加了一个<StringField>组件，它呈现一个带有一些验证附加功能的基本输入字段：

<template>
    <input :id="name" :class="{'form-input': true, 'form-error': !!errorMessage, success: meta.valid}"
           :name="name"
           :value="inputValue"
           type="text"
           @change="onChange"
           @input="onInput($event)"
    />
</template>

<script>
import {useField} from 'vee-validate';

export default {
    name: 'StringField',
    props: {
        name: {
            type: String,
            required: true,
        },
        modelValue: {
            type: String,
            default: "",
        },
    },
    setup(props) {
        const {
            value: inputValue,
            errorMessage,
            handleBlur,
            handleChange,
            meta,
        } = useField(props.name, undefined, {
            initialValue: props.modelValue,
        });

        return {
            handleChange,
            handleBlur,
            errorMessage,
            inputValue,
            meta,
        };
    },
    watch: {
        /* Syncs the value if it was updated from outside */
        modelValue (val) {
            this.inputValue = val;
        }
    },
    methods: {
        onInput (event) {
            this.$emit ('update:modelValue', event.target.value);
        },
        onChange (event) {
            this.handleChange (event);
        }
    },
    created () {
        if (this.modelValue) {
            this.inputValue = this.modelValue;
        }
    },
};
</script>

知道什么可能导致这个问题吗？

4

0 回答 0