Vue JS不呈现Option元素的value属性

Question

我在使用Vue JS的 Select 元素时有一个奇怪的事情： 以下代码：

<select id="nameDd" v-model="name" >
    <option v-for="n in names" v-bind:value="n.key" " >
        {{ n.value }}
    </option>
</select>

在选项元素中使用 Value 属性呈现选择：

<select id="nameDd">
    <option>Carol</option>
    <option>Carl</option>
    <option>Clara</option>
</select>

这当然意味着在需要时无法选择正确的选项。在我的场景中，单击表格中的条目并显示编辑表单（使用v-show），但选择仍为空，而不是选择正确的值。在后台，v-model'name'确实具有正确的值。

令人困惑的是，只要我选择一个选项，它就会添加 Value 属性：

<select id="nameDd">
    <option value="1">Carol</option>
    <option value="2">Carl</option>
    <option value="3">Clara</option>
</select>

现在（甚至更多）令人困惑的部分。这实际上显示了 Option 元素中的 Value 属性：

<select id="nameDd" v-model="name" >
    <option v-for="n in names" v-bind:value="n.key+'X'" " >
        {{ n.value }}
    </option>
</select>

...但当然附加了X，这又避免了选择正确的选项。

- 这是一些我没有得到的VueJs功能吗？我做错了什么？

Answer 1

为什么"代码中的v-bind:value之后会出现第二个双引号（option）？

<option v-for="n in names" v-bind:value="n.key" " >

我无法找到您的代码的任何其他问题。我几乎再次写了相同的代码，它工作。这是一个有效的jsFiddle供参考：https://jsfiddle.net/mani04/3x0z3vzk/

正如您所看到的，我真的没有太多代码，只有3行：

<select v-model="selectedPerson">
    <option v-for="person in people" :value="person.key">{{person.name}}</option>
</select>

我不知道第二个双引号是否导致了这个问题。 Vue期望完美标记，以便它可以正确地进行模型视图绑定。当我试图像你的那样放一个流浪的双引号时，我收到了一个控制台错误，而不是你注意到的缺失选项值。

我希望此示例有助于修复您的代码！