0

从 Kendo DropDownList 中选择值时,值会更新到模型,但错误始终保留在errorsvee-validate 的对象上。

仅当再次提交表单时,该错误才会被删除。

我试图在小提琴中实现类似的情况,但小提琴显示了实际行为。小提琴上一切正常。

小提琴链接

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

在此处输入图像描述

值已更新为模型,但错误仍然存​​在!

在此处输入图像描述

实际项目中使用的代码:

父组件

<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>

这个实现有什么问题?在这种情况下的任何帮助表示赞赏。

有什么指导或参考吗?

4

1 回答 1

2

这种情况是由于旧版本的vee-validate,我用它按预期工作的新版本更新了我的代码。

vee-validate: 2.1.0-beta.7

于 2018-08-14T07:28:38.980 回答