与 vue 绑定的输入值不会显示在 dom 中答案

【问题标题】：input value that's binded with vue does not show up in the dom与 vue 绑定的输入值不会显示在 dom 中
【发布时间】：2020-09-26 02:59:18
【问题描述】：

我正在尝试将 vue 的数据对象中属于 array 的 bind 的 property 的 property 设置为 input tag 的值 attribute，但它没有显示如果我在网络浏览器的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" 不起作用。

有没有人有线索。

【问题讨论】：

标签： javascript vue.js input binding v-model

【解决方案1】：

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

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能获得支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。
我也试过这个，但它不起作用。它只是拒绝显示 value 属性。

【解决方案2】：

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

input.value = role.Id

而不是：

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

你可以在这里看到相关的Vue源代码：

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

platformMustUseProp 的实现在这里：

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

如果您从周围的<td> 中删除hidden 属性，您应该会看到<input> 确实包含正确的值。目前尚不清楚为什么您需要它具有 value 属性，对于大多数实际目的而言，这并不重要，因为一切都应该使用 input.value 来访问该值。

如果<input> 将被隐藏，您可能还需要考虑使用type="hidden" 而不是type="text"。

【讨论】：