与vue绑定的输入值未显示在dom中

Question

我正在尝试将bind的property属于item的array的值attribute的数据对象中的input tag，但未显示如果我在网络浏览器的DOM中查看它。

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

id attribute可以给出正确的值，那么为什么不能提供attribute的值呢？:value="role.Id"不起作用。 有人知道吗？

Answer 1

您看到的是正常现象。 Vue特别对待value的<input>属性，并将其设置为属性而不是属性。有效地，编译后的模板使用：

input.value = role.Id

而不是：

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

您可以在此处查看相关的Vue源代码：

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

[C0的实现在这里：

platformMustUseProp

如果从周围的https://github.com/vuejs/vue/blob/98b4d683f578bb09c4e56f35048e49441c590a41/src/platforms/web/util/attrs.js#L11中删除hidden属性，则应该看到<td>确实包含正确的值。目前尚不清楚为什么需要它具有<input>属性，对于大多数实际目的而言，这并不重要，因为所有内容都应该使用value访问该值。

如果要隐藏input.value，您可能还想考虑使用<input>而不是type="hidden"。