CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
blu10
blu10

Reputation: 654

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

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?

Upvotes: 0

Views: 1260

Answers (2)

James Coyle
James Coyle

Reputation: 10398

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 + ' }';
    }
}

Upvotes: 0

Riddhi
Riddhi

Reputation: 2244

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

Upvotes: 1

Related Questions