Vue: Invalid key "modify" in validation rules object for prop

[smartprix]

Version

2.5.11

Reproduction link

https://jsfiddle.net/2v8pr5he/

Steps to reproduce

I'm getting the following warning:

Invalid key "modify" in validation rules object for prop 'form'

while defining a prop like this:

props: {
  form: {
    type: Object,
    default: () => ({}),
    modify: 'formData'
  }
}

while I know that modify is not a standard property in vue, it is used by my vue plugin. Is there some way I can disable this warning or change the validation rules for props?

What is expected?

Ideally there should be a way to disable this specific warning.

What is actually happening?

No such way currently.

[denjaland]

I think the question is what you are doing in that plugin. It makes little sense to me to add additional properies there...

[zdravkov]

Hi all,

The issue is definitely a breaking change. It is caused by this pull request and is already broken lots of cases. So far it was completely ok to add a custom property to a 'prop' that can be used later for some custom transformations or actions. The documentation is also not saying anything against such customization. Trading spell checking for loosing such flexibility of the framework seems quite odd to me. I would rather leave such spelling checks for some static code analysis tools.

In case this change is a must, one possible solution is adding some concrete custom property for such cases that can be used besides 'type', 'default', 'required' and 'validation'.

Greetings,
Plamen

[JounQin]

That seems something like meta of vue-router.

[Iankodj]

IMHO the prop is a plain JavaScript object that can take any possible abstraction, thus, any custom fields that can possibly serve a more advanced logic in the Vue component.

Indeed, it is dedicated to serve the purpose of the Vue framework, but still this is an object and having a different property inside is not a mistake that should be thrown as an exception. Warning, possibly yes, but not a JavaScript exception.

There are many possible cases that these errors can cause more troubles than actually help in case of a typo. Here you are some examples:

• You have a code base that defines object to be later used as props for custom Vue components. In that case, you will need to sanitize your own objects in order to use them as props and not hit that "error";

• You have a custom logic that involves additional evaluation of the props. And the prop's name is not suitable enough and further context is needed. @zdravkov nicely suggested to have a custom field, where to put such a context. I like that idea.

• Another great example: https://github.com/vuejs/vue/pull/7198#issuecomment-352703236

[yyx990803]

Reverting the warning, since this is causing issues for existing use cases, and the strict validation can still be applied by opting into tools like eslint plugins or TypeScript.