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>

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

使用复选框作为Vue中的数据绑定

2 个答案: