Question

从Kendo DropDownList选择值时，该值将更新到模型，但错误始终保留在vee-validate的errors对象上。

仅当再次提交表单时，错误才会被消除。

我试图在小提琴中实现类似的情况，但是小提琴显示了实际的行为。小提琴上的一切都很好。

但是当我在实际项目中使用相同的情况时，错误不会重置。我需要再次提交表单以重置错误。

值已更新为模型，但错误仍然存在！

实际项目中使用的代码：

父组件

<template>
<div class="container-fluid">
    <form @submit.prevent="onSubmit('form-client')" data-vv-scope="form-client" autocomplete="off">

        <row-component :model="form_fields" :data-source="dataSourceArray" :scopes="'form-client'">
        </row-component>
        Selected Value: {{form_fields}}
        <br/>
        <button type="submit" class="ui submit button">Submit</button>
    </form>


</div>

</template>

<script>
import rowcomponent from "./Child";
export default {
  components: { "row-component": rowcomponent },
  methods: {
    onSubmit(scope) {
      this.$validator.validateAll(scope).then(result => {
        if (result) {
          // eslint-disable-next-line
          alert("Form Submitted!");
          return;
        }

        alert("Correct them errors!");
      });
    }
  },
  data: function() {
    return {
      form_fields: {
        type: null
      },
      dataSourceArray: [
        { text: "Small", value: "1" },
        { text: "Medium", value: "2" },
        { text: "Large", value: "3" },
        { text: "X-Large", value: "4" },
        { text: "2X-Large", value: "5" }
      ]
    };
  }
};
</script>

子组件

<template>
<div>
    <label class="control-label">Drop Down</label>
    <kendo-dropdownlist v-model='model.type' data-vv-name="Type" data-vv-as="Type" :data-source="dataSource" v-validate="'required'"
        :data-text-field="'text'" :data-value-field="'value'" :option-label='"Type"' :filter="'contains'" :index="0" :auto-bind="true"
        class="form-control" :class="{'input': true, 'is-danger': `errors.has(${scopes}.Type)` }">
    </kendo-dropdownlist>
    <span class="is-danger" v-if="`errors.has(${scopes}.Type)`">{{errors.first(`${scopes}.Type`)}}</span>
</div>
</template>

<script>
export default {
  inject: ["$validator"],
  props: {
    model: {
      type: Object,
      default: {}
    },
    dataSource: {
      type: Array,
      default: []
    },
    scopes: {
      type: String,
      default: ""
    }
  }
};
</script>

此实现有什么问题？在这种情况下的任何帮助将不胜感激。

任何准则或参考？

Answer 1

这种情况是由于vee-validate的旧版本引起的，我用可以正常工作的新版本更新了代码。

vee-validate: 2.1.0-beta.7

在子组件上更改值时，不会更新vee-validate错误

1 个答案: