input value that's binded with vue does not show up in the dom

Question

I'm trying to bind a property of an item that belongs to an array in the data object of vue to the value attribute of an input tag, but it does not show up if I look at it in the DOM of a web browser.

<template v-for="role in roles">
            <tr>
                <td>{{ role.Name }}</td>
                <td>
                    <button type="button" class="btn-danger" @@click="RemoveRole(role)">Remove</button>
                </td>
                <td hidden>
                    <input type="text" :id="role.Id" name="role[]" v-model="role.Id"/> // results in just "<input type="text" id="..." name="role[]" />"
                    // there is no value attribute visible, but the Id attribute can give the right value?
                </td>
            </tr>
        </template>

The id attribute can give the right value so why cant the value attribute?
:value="role.Id" does not work.

Does anyone have a clue.

score 0 · Answer 1 · answered Jun 07 '20 at 03:08

What you're seeing is normal. Vue treats the value attribute of an <input> specially and sets it as a property rather than as an attribute. Effectively the compiled template uses:

input.value = role.Id

rather than:

input.setAttribute('value', role.Id)

You can see the relevant Vue source code here:

https://github.com/vuejs/vue/blob/98b4d683f578bb09c4e56f35048e49441c590a41/src/compiler/parser/index.js#L837

with the implementation of platformMustUseProp being here:

https://github.com/vuejs/vue/blob/98b4d683f578bb09c4e56f35048e49441c590a41/src/platforms/web/util/attrs.js#L11

If you remove the hidden attribute from the surrounding <td> you should see that the <input> does contain the correct value. It isn't clear why you need it to have a value attribute, for most practical purposes that shouldn't matter as everything should be accessing the value using input.value instead.

If the <input> is going to be hidden you may also want to consider using type="hidden" rather than type="text".

score 0 · Answer 2 · answered Jun 07 '20 at 10:45

0

<input type="text" :id="role.Id" name="role[]" :value="role.Id"/>

answered Jun 07 '20 at 10:45

mai elrefaey

394
1
3
10

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – ysf Jun 07 '20 at 16:14
I also tried this but it does not work. It simply refuses to show show the value attribute. – NS - Not the train Jun 08 '20 at 12:45

input value that's binded with vue does not show up in the dom

2 Answers2