4

I am trying to implement a simple vue.js applicaton and I ran into this conceptual question: I have a small set of read only input fields showing values for calculated fields. I have tried both approaches and I am slightly leaning towards the v-bind approach (v-model is mostly for inputs), but I am really curious about the consequences of using one or the other.

<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-bind:value="characterPointsRemaining">
<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-model.number="characterPointsRemaining">
Improve this question
1
  • 3
    Why would you use a statically readonly input at all? It seems that a span or div is better suited for this. That said, v-bind is the correct directive for one-way data flow. Commented May 16, 2017 at 20:07

2 Answers 2

Reset to default
10

From Vue.js guide:

Remember:

<input v-model="something">

is just syntactic sugar for:

<input v-bind:value="something" v-on:input="something = $event.target.value">

So using v-model for input, that cannot be changed is pointless, as it will never generate input event.

Besides, as David L already pointed out, you probably should use something more proper for this use case, like <div>.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

"So using v-model for input, that cannot be changed is pointless, as it will never generate input event." This is not true. For example, we run a multi-lingual app where dates in: * the US are formatted in MM/DD/YYYY. * in France are formatted as DD/MM/YYYY. In order to ensure that dates are properly entered (and pass validation), we disable direct user input and only allow input via Bootstrap Datepicker. So, as you can see, just because direct user input is disabled does not mean that allow input is disabled.
2

As mentioned by Staszek, v-bind:value is the incomplete longhand for the v-model syntactic sugar.

However, in your case, you should use neither.

Inputs are used to convey a very specific set of functionality to the user; that they can interact with the form to provide their input. In this case, they cannot, because you've made the form readonly. However, a readonly input isn't necessarily any better because it implies to the user that you can actually do something to enable the input, which in your case isn't true.

The most correct way to handle this scenario is to not use an input at all, but to use another element that more properly represents outputted data, binding the data via text interpolation:

<div id="cp-remaining">{{characterPointsRemaining}}</div>
Improve this answer

1 Comment

Thanks for the answer, David, much appreciated! Under normal circumstances I would not use input for output. In this particular case I am trying to get as close and visually consistent to a paper based form as possible, and a disabled input makes sense for this particular use case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.