vue js checkbox, pass a json object as value to model

Question

Is it possible to pass a Json Object as value on a checkbox I have multiple checkboxes like below... selectedUsers is an array that contains the selected values... id like to end up with a json array like [{"userid": "12345"}, {"userid": "54321"}]

<input
  :id="`checkbox` + index" v-model="selectedUsers"
  :value="{"userId": user.userId}"
  @change="selectUsers"

The above gives me a parsing error Parsing error: unexpected-character-in-attribute-name.

I am able to pass an object like this

  :value="{userId: user.userId}"

Is there a clever way to achieve what i want here?

so user.id is dynamic value.... so i want to pass for example {"userId": "123ABC"}... selectedUsers is an array... im trying to create a json array — blu10
– blu10, Commented Feb 22, 2019 at 13:09
Your parsing error is because you are using the same type of quotes: :value="{"userId": user.userId}" is interpreted as :value="{" and userId": user.userId}", the second of which is invalid. Use different quotation marks instead: `:value="{'userId': user.userId}"' — Euan Smith
– Euan Smith, Commented Feb 22, 2019 at 13:15
Of course that is entirely equivalent to just not putting userId in quotes at all, which is what you did on the second one.... so, what exactly are you wanting to do? In what way precisely is :value="{userId: user.userId}" not doing what you want? — Euan Smith
– Euan Smith, Commented Feb 22, 2019 at 13:18
so im basically trying to construct a json array that can use in an api call... i updated my question above... if i use :value="{'userId': user.userId}"' the value still gets set as {userId: "1234"} in the array ... — blu10
– blu10, Commented Feb 22, 2019 at 13:24

Riddhi · Accepted Answer · 2019-02-22 13:07:38Z

1

Well if you want you can create an object and pass that to the value as below.

  <input
  :id="`checkbox` + index" v-model="selectedUsers"
  :value="details"
  @change="selectUsers">

  data: {
    details:{
    user:'userid'
    }
  }

answered Feb 22, 2019 at 13:07

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

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

5 Comments

blu10 Over a year ago

sorry probably wasnt explained well, so its a series of checkboxes... selectedUsers above is an array... and when a checkbox is selected i'd like to pass json object to it...

Riddhi Over a year ago

Check this fiddle jsfiddle.net/RiddhiParekh/150amowf/7. In this the v-model isChecked is populated with the value being passed.

blu10 Over a year ago

yeah that works for one binding, but not for multiple

jordan Over a year ago

@blu10 I made a small change to Rhiddhi's comment, jsfiddle.net/w6vz3e4q/1 I believe this is what you're after?

Riddhi Over a year ago

@jordan I have updated you forget to change the variable name.jsfiddle.net/RiddhiParekh/vjm7ck5z

James Coyle · Accepted Answer · 2019-02-22 13:28:26Z

0

Call a method and pass it the user id:

<input
  :id="`checkbox` + index" v-model="selectedUsers"
  :value="userIdObj(user.userId)"
  @change="selectUsers">

And then in the component's methods declaration:

methods: {
    userIdObj(id) {
        return '{ "userId": ' + id + ' }';
    }
}

answered Feb 22, 2019 at 13:28

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

Collectives™ on Stack Overflow

vue js checkbox, pass a json object as value to model

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related