在 vue 中使用复选框作为数据绑定答案

【问题标题】：Use checkbox as data binding in vue在 vue 中使用复选框作为数据绑定
【发布时间】：2018-09-11 10:06:59
【问题描述】：

我正在努力找出如何在 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>

然后查询返回一个 JSON 对象，如下所示：

data: {
    names: [
        { firstName: "Jessica", lastName: "Jones" },
        { firstName: "Mike", lastName: "Lebowski" }
    ]
}

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

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

-或-

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

它与整个对象一起渲染

{ firstName: "Jessica", lastname: "Jones" }

或者firstname 在一行，lastname 在另一行。

有没有什么方法可以根据选定的输入在 HTML 的一行中呈现所有内容？

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案1】：

您可以使用objectName.propertyName 直接访问对象中的属性。

在你的情况下：

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

【讨论】：

是的，我知道，但由于属性名称并不总是可访问的，因此它不起作用。因为我在选择时得到了不同的数据分析
你可以将它们包裹在v-ifthen: <p v-if="name.firstName">{{ name.firstName }}</p> <p v-if="name.lastName"> {{ name.lastName }}</p>
这将需要大量的v-if 语句......因为最终代码中会有多个选择

【解决方案2】：

你也可以使用解构：

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

【讨论】：

但如果我选择移动设备以及名字和姓氏，数据将返回 3 个键。但数据绑定只呈现 2：{{firstName}} {{lastName}}
所以也添加手机。您不仅限于两个属性。
我觉得我解释得不够好。如果我选择 och firstName 和 lastName 并使用 {{firstName}} {{lastName}} {{mobile}} 运行查询，我将收到 {{mobile}} 为空的错误。由于查询只会返回您选择的数据绑定的值，因此无法修复。你明白吗？
没有看到您的编辑！这就是答案！非常感谢！