vue.js - 如何绑定只读输入字段？ v-bind:value 还是 v-model？

Question

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">

Answer 1

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> .

Answer 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>