javascript - 在vue中使用checkbox作为数据绑定(bind)

Question

我正在努力寻找如何在 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 的一行中呈现所有内容？

Answer 1

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

在你的情况下:

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