Using Vue.js, you can bind a JSON object as the value of a checkbox input to the

Can a Json Object be passed as a value on a checkbox? I have multiple checkboxes as shown below... selectedUsers is an array containing the selected values... I would 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 code above is throwing 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 smart way to achieve my desired outcome here?

javascriptvue.jsvuejs2vue-component

Answer №1

If you desire, you have the option to construct an object and transmit it as the value in the following manner.

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

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

Answer №2

Invoke a function and provide it with the user identifier:

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

Next, add the method to the component's methods section:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the confusing "undefined" result when parameters are passed to a mapped getter function

I have a set of getters that are designed to receive an id and return the corresponding data. I've connected these getters to a component, but when passing a parameter, it ends up being undefined. Component: <template> <div> ...

vue.jsvuejs2vuex

Change URL link after login user with javascript

Is there a way to generate a URL link based on the user's name (gmail)? For example: The code below is somewhat suitable for my needs. However, I am trying to figure out how to automatically retrieve the username and populate it in the input field. ...

javascriptjqueryhtmlhyperlink

AngularJS: handling multiple asynchronous requests

When I make multiple ajax calls in my code, I noticed that the API is only reached after all the ajax calls have been executed. Below you can see the JavaScript code: function test = function(){ var entity = {}; entity.Number = 1; ...

javascriptajaxangularjspostasynchronous

I am eager to design a form input field within the vuetify framework

https://i.sstatic.net/zbCfI.png I'm having trouble creating a text field in Vuetify where the button and height are not behaving as expected. I've attempted to adjust the height multiple times without success. Although I have the necessary CSS, ...

cssvue.jsnuxt.jsvuetify.js

Issues with form submission and JavaScript functionality have been detected in Internet Explorer, Firefox, and Safari, but are functioning properly in Chrome

Hey there! I've encountered a puzzling issue with a form I've created. It's programmed to determine the next page to redirect to using JavaScript after submission. Oddly enough, everything functions perfectly when I test it out in my IDE (C ...

javascripthtmlinternet-explorergoogle-chromefirefox

Passing a ref from a parent component to a child component in reactjs

I have the following situation, how can I make sure that the attachment field in the child component is accessible from the parent component? class ServiceDeskCustomerCreate extends Component { constructor(props, context) { super(props, context); ...

javascriptreactjs

Angular code is failing to send a signal to the server following a $http.post request

I've been using angular for about a week now and I've been struggling to solve this issue. I have a service that wraps around $http because multiple controllers make calls to the same URL. On one particular page, there is a lot of server-side bus ...

javascriptangularjsajax

Discovering the dimensions of a video in Angular 2 using TypeScript

To determine whether the video is portrait or landscape, I am attempting to retrieve the height and width of the video using the following method: import { Component, OnInit, AfterViewInit } from '@angular/core'; @Component({ selector: ' ...

javascriptangulartypescriptvideo

Exploring the possibilities of integrating JSONP with Framework7

I've been attempting to retrieve images from the Instagram public API using ajax and JSONP: var target = https://www.instagram.com/p/BP3Wu_EDXsjdT5Llz13jFv2UeS0Vw0OTxrztmo0/?__a=1?callback=?'; $$.ajax({ ty ...

javascriptjqueryajaxinstagram-apihtml-framework-7

Extract items from javascript array based on their index value

Recently I came across a javascript array var countries = ["India","USA","China","Canada","China"]; My goal is to eliminate "China" only from the 2nd position while keeping the rest intact. var countries = ["India","USA","Canada","China"]; I am see ...

javascriptarrays

Running JavaScript code for the iframe

Question about Manipulating Content in an iFrame: Invoking javascript in iframe from parent page I am attempting to load a HTML page with an iFramed website and then manipulate the content by removing an element, referred to as '#test'. < ...

javascriptjquerydom

Tips for activating a responsive object on the DOM using the Nuxt Composition API

After fetching data from the API, I noticed that my reactive form object was not updating on the DOM even though it changed in the console.log() when I refreshed the page. When the DOM is mounted, I populate my form object, but because it's a reactiv ...

vue.jsnuxt.jsvuejs3vue-composition-api

Unable to retrieve PHP data using AJAX

Index.html → <form> <div class="form-group"> <!-- <input type="text" id="name" class="form-control" placeholder="Enter Name"> --> </div> <div ...

javascriptphpajax

Enabling CORS for jsonplaceholder website

Currently, I am delving into learning Vue and experimenting with making API calls using Axios to my local Django server. As a result, I have come across CORS errors. Despite my understanding of how CORS functions and why it might be blocking my calls, I fi ...

djangovue.jscors

Ways to generate an element with a specific identifier using a single line of code

When creating an element, I often use the following syntax: var foo = document.createElement('div'); To set the ID of the div, I would typically do this: foo.setAttribute('id', 'divName'); After some searching online, I ca ...

javascriptjqueryhtmlcss

"Discover the process of incorporating two HTML files into a single HTML document with the help of

I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...

javascriptjqueryhtmld3.js

Tips for preventing redundant AJAX calls following a setTimeout

I have a text field where I check the database for matches when users type. However, I want to avoid overloading the database with unnecessary queries if someone quickly types several characters. After browsing the internet, it seems like the recommended ...

javascriptjqueryajax

Utilizing Vue and Websockets for seamless communication: Managing the exchange of messages between users

In an attempt to create a messaging system that shows alerts of messages to different users, I have implemented Vue Socket Io from https://www.npmjs.com/package/vue-socket.io. However, the issue lies in the fact that the alerts are not being triggered as e ...

javascriptvue.jsvuejs2socket.io

What is the best way to ensure that a Vue component can be rendered in any location

Is there a way to make a Vue component render anywhere on the page without requiring it to be enclosed in an element with an ID of "app"? I currently have 4 components and one div with an ID of "app". When I try to add another Vue component within a diffe ...

laravelvue.js

What is the best way to generate a new DIV every time a button is clicked?

I am attempting to make a square DIV that is red and measures 100x100 pixels. Each time a button is clicked, I want the square to be created. However, the code I have written is not functioning properly: <html> <title> Create New Div ...

javascripthtml