Javascript 在vue中将复选框用作数据绑定

我正在努力找出如何在Vue中渲染选定的值

我有一个基于选择运行查询的表单：

<form id="Register">   
    <br>Firstname<input type="checkbox" value="firstName">
    <br>Lastname<input type="checkbox" value="lastName">
    <br>Nickname<input type="checkbox" value="nickName">
    <br>Mobile<input type="checkbox" value="Mobile"">
    <br><button type="button" id="submit">Submit</button>
</form>

但当我尝试在Vue中使用v-for渲染时

<div class v-for="name in names">
    {{name}}
</div>

或者在一行上使用

firstname

，在另一行上使用

lastname

---

是否有某种方法可以根据所选输入在HTML的一行中呈现所有内容？

您可以使用

objectName.propertyName

直接访问对象中的属性

就你而言：

<div class v-for="name in names">
    {{name.firstName}} {{name.lastName}}
</div>

{{name.firstName}{{name.lastName}}

您还可以使用解构：

<div class v-for="({firstName, lastName}) in names">
  {{firstName}} {{lastName}}
</div>

{{firstName}}{{lastName}}

或者，将属性映射到以下行：

<div class v-for="name in names">
  {{ Object.keys(name).map(key => name[key]).join(' ') }}
</div>

{{Object.keys（name）.map（key=>name[key]）.join（“”）}

是的，我知道，但由于属性名称并不总是可访问的，因此它不起作用。由于我在选择中得到了不同的数据，你可以将它们包装在

v-if

中，然后：

{{{name.firstName}}
{{name.lastName}
，这需要很多
v-if
语句。。。因为在最终的代码中会有多个选择，但是如果我选择mobile以及firstname和lastname，数据将返回3个键。但是数据绑定只呈现2:{{firstname}{{lastname}}，所以也添加mobile。你不仅仅局限于两处房产。我想我对自己的解释不够好。如果我选择och firstName和lastName并使用{{firstName}{{lastName}}{{mobile}}运行查询，我将得到一个错误，{{mobile}为空。由于查询将只返回您选择的值，因此数据绑定无法修复。你明白吗？没有看到你的编辑！这就是答案！非常感谢你！
<div class v-for="name in names">
    {{name.firstName}} {{name.lastName}}
</div>

<div class v-for="({firstName, lastName}) in names">
  {{firstName}} {{lastName}}
</div>

<div class v-for="name in names">
  {{ Object.keys(name).map(key => name[key]).join(' ') }}
</div>