Tag Archives: Front-end development

[Solved] Invalid prop: type check failed for prop “modelValue“. Expected Number…

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.

 

React runs the browser and reports an error [A may have only one child element]

The error message

Uncaught Invariant Violation: A <Router> may have only one child element
    at invariant (http://localhost:8111/bundle.js:1071:15)
    at Router.componentWillMount (http://localhost:8111/bundle.js:2413:54)
    at callComponentWillMount (http://localhost:8111/bundle.js:27042:14)
    at mountClassInstance (http://localhost:8111/bundle.js:27135:5)
    at updateClassComponent (http://localhost:8111/bundle.js:30309:5)
    at beginWork (http://localhost:8111/bundle.js:31265:16)
    at performUnitOfWork (http://localhost:8111/bundle.js:34933:12)
    at workLoop (http://localhost:8111/bundle.js:34973:24)
    at renderRoot (http://localhost:8111/bundle.js:35056:7)
    at performWorkOnRoot (http://localhost:8111/bundle.js:35963:7)

The solution

The original demo 

ReactDom.render(
    <BrowserRouter>
	    <Nav />
	    {getRouter()}
    </BrowserRouter>,
    document.getElementById('app')
)

Resolved Demo (if there are multiple components in The BrowserRouter, add a layer of div to the BrowserRouter) 

ReactDom.render(
    <BrowserRouter>
        <div>
            <Nav />
            {getRouter()}
        </div>
    </BrowserRouter>,
    document.getElementById('app')
)

As for the reasons, I haven’t studied them in detail yet. If you know some friends, you can communicate with them, or explain them in the comments below. Thank you.

How to restrict input field to only input pure numbers in HTML

limit input input box can only enter pure Numbers

1, the onkeyup = "value, value = replace (/ [^ \] d/g,") "

USES the onkeyup event, and has the bug, that is, in the state of Chinese input method, after Chinese characters are input, enter directly, the letter

will be input directly

2, onchange = "value, value = replace (/ [^ \] d/g,") "

USES the onchange event. After input content, only the input loses focus will get the result, and the response

cannot be made when input

3, the oninput = "value, value = replace (/ [^ \] d/g,") "

USES the oninput event, which perfectly solves the above two problems. There are no other problems in the test for the time being.

code example 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>input</title>
</head>
<body>
    只能输入纯数字的输入框:<input type="text" name="" oninput="value=value.replace(/[^\d]/g,'')">
</body>
</html>

above code has been tested in Google, firefox, baidu, UC, IE11, 360 fast, QQ, Edge browser, please feel free to use,

thanks for qq_38726717, xiao xiao xin feedback in the comments section.