Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Placeholder shown instead of value

See original GitHub issue

Expected Behavior

Given you have the following vue-numeric component:

<vue-numeric v-model="value" placeholder="placeholder" />

If value is set, I would expect to see the value. Just as described in the documents:

Input placeholder when empty

Actual Behavior

When component is mounted, the value is not shown until you click on the input field. The placeholder is shown instead.

Steps to Reproduce the Problem

See example in codesandbox:


  • Plugin Version: 2.3.0
  • Vue.js Version: 2.5.2
  • Browser: Firefox Dev. 60.0b12
  • OS: macOS 10.13.3

In #39 you said it was intended to work like this, can you explain the reason for this?


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:10
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

mgasparelcommented, May 12, 2018

If you set your value in the mounted() event, this works as expected

mounted() {
  this.numericValue = 500
kevinongkocommented, Mar 19, 2021
Read more comments on GitHub >

github_iconTop Results From Across the Web

Show placeholder instead of the default value in html form
Yes, with a placeholder, the user can just start typing a new value. However, you are requesting that the placeholder be forced to...
Read more >
:placeholder-shown - CSS: Cascading Style Sheets | MDN
The :placeholder-shown CSS pseudo-class represents any or element that is currently displaying placeholder text.
Read more >
placeholder-shown - CSS-Tricks
:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. As opposed to ::placeholder which styles the ...
Read more >
Placeholder vs Value Attributes in HTML - GeeksforGeeks
The placeholder attribute specifies a short hint that describes the expected value (type of value) of an input field. The value attribute ...
Read more >
CSS :placeholder-shown |
The :placeholder-show is a CSS pseudo-class that allows you to apply styling to <input> or <textarea> that has a placeholder text. <input placeholder=" ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found