Use checkbox as data binding in vue

Question

I'm struggling to find out on how to render the selected values in Vue.

I have a form that runs a query based on the selection:

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

Then the queries return a JSON object like this:

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

But when i try to render this in Vue using v-for

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

-or-

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

It renders either with the entire object

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

or with firstname on one row and lastname on another.

Is there some way you can render everything in one row in the HTML based on the selected input?

Kirk Larkin · Accepted Answer · 2018-09-11 10:20:02Z

2

You can directly access a property in an object with objectName.propertyName.

In your case:

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

edited Sep 11, 2018 at 10:20

Kirk Larkin

94.3k17 gold badges235 silver badges214 bronze badges

answered Sep 11, 2018 at 10:17

Jns

3,2871 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Keystone Jack Over a year ago

Yes I know, but since the property name Will not always be accsesible it doesn’t work. Since I get diffrent data anses on the selection

Bennett Dams Over a year ago

You could wrap them in v-ifthen: <p v-if="name.firstName">{{ name.firstName }}</p> <p v-if="name.lastName"> {{ name.lastName }}</p>

Keystone Jack Over a year ago

That would require alot of v-if statements... Since there will be multiple selections in the final code

Brian Lee · Accepted Answer · 2018-09-11 11:59:21Z

1

You can use destructuring also:

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

Or, map the properties in line:

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

edited Sep 11, 2018 at 11:59

answered Sep 11, 2018 at 11:13

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

4 Comments

Keystone Jack Over a year ago

But if I choose mobile as well as firstname and lastname the data will return with 3 keys.But the data binding only renders 2: {{firstName}} {{lastName}}

Brian Lee Over a year ago

So add mobile also. You're not restricted to only two properties.

Keystone Jack Over a year ago

I think I didn't explain myself good enough. If I make the selection och firstName and lastName and run the query with {{firstName}} {{lastName}} {{mobile}} I will get an error that {{mobile}} is empty. Since the query will only return values that you select the data bindnings can't be fixed. Do you understand?

Keystone Jack Over a year ago

Didn't see your edit! That is the answer! Thank you so much!

Collectives™ on Stack Overflow

Use checkbox as data binding in vue

2 Answers 2

3 Comments

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Related