Warning prompt

After running the project, chrome console will prompt the following error message:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Number with value 5, got String with value "5".

  at <VanRate modelValue="5" onUpdate:modelValue=fn<onUpdate:modelValue> size=11  ... >

  at <DetailItem detailData= (2) [{…}, {…}] onTrustBuyClick=fn<bound trustClick> >

  at <Detail onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {getSpecialData: ƒ, trustClick: ƒ, moreClick: ƒ, …} > key=0 >

  at <RouterView>

  at <App>

analysis

According to the above warning prompt, you can clearly see the problem, Invalid prop: type check failed for prop “modelValue”. Expected Number with value 5, got String with value “5” This sentence has actually explained that the reason for the error is prop The attribute value of the value failed to be verified. The value required by the component is 5 of the number type, but the currently obtained value is “5” of the string type. This is caused by inconsistent data types. The prop is used as a property in the Vue component, so you only need to determine which component is reporting the error. Check the value format of the prop and change it to the Expected type, such as number here. To sum it up: warning errors due to inconsistent data types.

Solution:

The warning log has indicated that the specific error occurred in that component. Find the location of that component, and then check where the data types are inconsistent when transmitting values, and then modify the attributes. Generally, the value format type in the props of the component can be directly modified to the type required by the corresponding component.

Read More:

• [Vue warn]: Invalid prop: type check failed for prop “index“. Expected String, got Undefined
• [Solved] Invalid prop: type check failed for prop “index“. Expected String, got Undefined
• [Vue warn]: Invalid prop: type check failed for prop [How to Solve]
• The page console error [Vue warn]: Invalid prop: custom validator check failed for prop “status“
• [Vue warn]: Invalid prop: custom validator check failed for prop “navigationBarTextStyle“.
• [Vue warn]: Invalid prop: custom validator check failed for prop “index“
• How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …
• How to Solve Error: [Vue warn]: Missing required prop: “value”
• [Solved] el-date-picker Error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.
• Vue modifies the value passed by props error: Avoid mutating a prop directly since the value will be overwritten whenever the par
• Please transfer a valid prop path to form item
• [Vue warn]Error in mounted hook: “Error: please transfer a valid prop path to form item“
• [Solved] Error in mounted hook: “Error: please transfer a valid prop
• [Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item“
• [Solved] Error in v-on handler: “Error: please transfer a valid prop path to form item
• Error: input is invalid type [How to Solve]
• request.js?b775:101 Uncaught (in promise) Error: Failed to convert value of type ‘java.lang.String’ to required type ‘java.lang.Long’;
• Vue Error: error in mounted hook: TypeError: invalid src type
• After installing NPM, NRM LS reports an error throw new err_INVALID_ARG_TYPE(name, ‘string‘, value)
• [Solved] 20:1 error Expected indentation of 2 spaces but found 4 indent 21:1 error Expected indent