Secondary Form Checkbox Input

Presently, I am working with a dynamic form-checkbox input element.

<b-form-group label="Skills">
    <b-form-checkbox-group v-model="form.selected" :options="options"/>
</b-form-group>

However, I am looking to enhance this functionality by adding a number input next to each option and linking them together.

I attempted to achieve this using a v-for loop, but I encountered difficulties in linking them so that the v-model destination would resemble the following structure for each selected option:

form {
    { selected: checkboxName,
      number: 5
    },
    { selected: checkboxNameTwo,
      number: 2
    },
}

If anyone has any suggestions or guidance on how to accomplish this, it would be greatly appreciated.

Sincerely, Fox

javascriptvue.jsbootstrap-vue

Answer №1

Ensuring each option has an input value associated with it is crucial in the second version. To achieve this, you can follow the example below.

new Vue({
el: '#app',
  data: {
  form: [
        {
          name: 'first',
          number: 0,
          selected: false
        },
        {
          name: 'second',
          number: 0,
          selected: false
        }
      ]
  }
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<div id="app">
  {{form}}
  <b-form-group >
     <b-input-group v-for="option in form" :key="option">   
      <b-input-group-prepend is-text>
        {{option.name}}  
        </b-input-group-prepend>
      <b-form-input v-model.number="option.number" type="number" >
        </b-form-input>
      </b-input-group>
 
   </b-form-group>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

If you also need CheckBox options, simply add them next to the option name as shown above.

This guide should assist you in implementing the desired functionality.

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

Data is present in a JavaScript array, yet it is returning a value of

In my quest to create an array of User IDs for an AJAX Post Request, I encountered a strange issue. Despite successfully retrieving and displaying the User IDs individually in console.log, once I push them to the connectionData array, accessing specific in ...

javascriptarraysajax

Here is a way to prevent a null input value from being accepted in a JavaScript function

Hey there, I have a function that looks like this: class Fun { pem_Files_Checker_And_Adder_Server_Id_Adder(id , serverType , hostname) { //do something }; }; } In order for this function to work properly, I need to give it some values. For exam ...

javascriptnode.js

Is it possible to delete a <div> tag based on screen size using jQuery or JavaScript?

Hello, I was curious if it's possible to dynamically remove a specific div tag using jQuery or JavaScript when the screen reaches a certain size, for example 500px. ...

javascriptjqueryhtml

Is There a Name Clash Issue with Dependency Injection in AngularJS?

Let's say I have two modules, finance2 and finance3, both of which define a service called currencyConverter. If I specify that my main module only depends on finance2, I can inject the service like this: angular.module('invoice2', [' ...

javascriptangularjs

Issue with Cross Site Scripting Iframe Permission Denied

I'm encountering a Cross Site Scripting error when using the code below. Javascript function resizeIframe(ifRef) { var ifDoc; //alert(ifRef); try { i ...

javascripthtmlwordpressiframecross-domain

How can I create a slot component with a prop defined in the child component?

If I have three components called Alpha, Bravo, and Charlie. Here is how they are structured: Alpha.vue <template> <div class="alpha"> <bravo> <template slot="card"> <charlie></cha ...

vue.js

Restrict user uploads to a maximum of 5 posts per minute using Jquery

Recently, I have implemented this jQuery/AJAX code snippet: var uploaded=0; if (uploaded!=0) { setInterval(function() { uploaded--; }, 60000); alert(uploaded); } $(".UploadMSub").click(function(event){ event.preventDefault(); ...

javascriptphpjqueryajax

What is the best way to use selenium for iterating through multiple pages on a website?

Recently, I've been attempting to create a Python script to scrape a specific website for a list of all URLs. The website in question is . The main challenge I've encountered is that the website utilizes Javascript for navigation, making it diff ...

javascriptpythonselenium-webdriverweb-scrapingbeautifulsoup

Add the AJAX response to the dropdown menu options

Currently in my project, I am utilizing Laravel as a backend. The scenario is such that once the corresponding page loads, it triggers an ajax request to fetch vehicle data which consists of vehicle model and plate number properties. My aim is to display t ...

javascriptphpjqueryajaxlaravel

What is causing the reluctance of my Angular test to accept my custom form validation function?

I'm currently facing an issue with testing an angular component called "FooComponent" using Karma/Jasmine. Snippet of code from foo.component.spec.ts file: describe('FooComponent', () => { let component: FooComponent let fixture ...

javascriptangulartypescriptjasminekarma-runner

JavaScript inheritance through prototypes and the properties of objects

I am currently exploring the concept of prototyped inheritance in JavaScript for a function. This process is well documented in Wikipedia's javascript article. It functions smoothly when dealing with simple JavaScript types: function Person() { t ...

javascriptinheritance

What is the easiest way to switch the ON-OFF button and fetch data from the API?

I have completed my code to fetch data from an API upon button click, but I am now looking for a way to incorporate a toggle button for a more user-friendly and organized interface. However, I am unsure of how to implement this feature within my function a ...

javascriptreactjstogglefetch-api

Vue/Antd radio button group styles not being applied properly due to binding issue

I have encountered a peculiar issue while developing a small Vue component. Initially, when I crafted the HTML for a radio button group, everything functioned flawlessly. However, upon transitioning the code to bind to a data source, although it operated ...

vue.jsantdv

Determining the spatial capacity of a mesh using ThreeJS surpasses the volume of its bounding box

Issue at Hand: The challenge lies in the fact that the bounding box volume is turning out to be smaller than the volume calculated from the mesh. Attempts So Far: To begin with, I computed the volume of a bounding box using the following code: //loaded ...

javascript3dthree.js

How to Send a Multi-part Message Using AT Commands and PDU Mode in Node.js

I am trying to send a multipart message using AT commands. Single parts work fine, as do special characters. However, when the message exceeds 160 characters, it shows as sent but nothing is received. const async sendSMS(msisdn, message) { message += ...

javascriptnode.jsat-commandpdu

Suggestions for this screenplay

I am completely new to the world of coding and computer languages, and I could use some guidance on how to utilize this script for a flash sale. setInterval(function() { var m = Math.floor((new Date).getTime()/1000); if(m == '1476693000000& ...

javascriptdom-events

Error: Provider not recognized

Currently, I am in the process of creating a basic chat application using express.js, socket.io, and angular. The functionality seems to be working properly. However, I am encountering an issue where the socket message event is not synchronizing and displa ...

javascriptangularjs

Instantly summing up two numbers with javascript

In my web development work using Visual Studio 2008, I encountered an interesting challenge. On a webpage, I have three textboxes labeled "Price," "Quantity," and "Amount." The task at hand is to calculate the value of "Amount" by multiplying the values ...

javascriptvisual-studio-2010

Filtering data on objects in Angular can be achieved by utilizing the built-in

Retrieving data from the backend using this function: private fetchData(): void { this.dataService.fetchData().pipe( tap((response: any) => { this.persons = response.results; this.familyMembersTrue = this.persons.filter(x =&g ...

javascriptangulartypescriptobjectfilter

Setting character limits when defining string variables in TypeScript

Upon reviewing the documentation, it appears that there is no straightforward method to perform type checking for the minimum and maximum length of a string data type. However, is there a possible way to define a string data type using custom types in ord ...

javascriptstringtypescriptvalidationconstraints