ensure that only one option can be selected with the checkbox

Can someone help me with applying this code on VueJS? I tried replacing onclick with @click but it's not working for me. I'm new to VueJS, so any guidance would be appreciated!

function onlyOne(checkbox) {
    var checkboxes = document.getElementsByName('check')
    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false
    })
}
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
<input type="checkbox" name="check" onclick="onlyOne(this)">
javascriptvue.jsvuejs2

Answer №1

Here is a simple solution to the problem at hand:

new Vue({
  el: "#app",
  data() {
    return {
      checkboxes: [{
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
        {
          checked: false
        },
      ]
    }
  },
  methods: {
    onChange(cb) {
      this.checkboxes = this.checkboxes.map(checkbox => ({ checked: cb == checkbox }))
    },
  },
  template: `
    <div>
      <div
        v-for="(checkbox, i) in checkboxes"
        :key="i"
      >
        <input
          type="checkbox"
          :checked="checkbox.checked"
          @change="() => onChange(checkbox)"
        />
        {{ checkbox.checked }}
      </div>
    </div>
  `
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

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

Can an unresolved promise lead to memory leaks?

I have a Promise. Initially, I created it to potentially cancel an AJAX request. However, as it turns out, the cancellation was not needed and the AJAX request completed successfully without resolving the Promise. A simplified code snippet: var defer = $ ...

javascriptangularjsmemory-leakspromiseangular-promise

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

My plan involves utilizing a Java web service to fetch the HTML content from a specific URL using Jsoup, and then returning it as a string to the requesting party, which could be an Angular or JS script. I am keen on preserving this content somewhere and l ...

javascriptjavahtmlangularjsiframe

Steps to isolate the "changed" values from two JSON objects

Here is a unique question that involves comparing JSON structures and extracting the differences. A JqTree has been created, where when the user changes its tree structure, both the "old" JSON and "new" JSON structures need to be compared. Only the values ...

javascriptjqueryjson

Experiencing issues with utilizing long polling on a node.js server URL in Internet Explorer

Currently, I am in the process of testing an application that utilizes long polling with jQuery to query a server built with node.js. The code for long polling is as follows: (function poll(){ $.ajax({ url: "http://localhost:3000/test", ...

javascriptjquerynode.jsinternet-explorerlong-polling

Choosing Tags with Ajax in Select2

The JSON data below is fetched from /tags: [ { "id": "CSS", "text": "CSS" }, { "id": "HTML", "text": "HTML" }, { "id": "JavaScript", "text": "JavaScript" }, { "id": "jQuer ...

javascriptjqueryajaxtagsjquery-select2

What could be causing the abundance of API calls from Yandex Metrica?

In my Nextjs SPA, there is an iframe widget that is rendered using React. Inside this widget's index.html file, I have inserted the Yandex Metrica script and set up a goal tag to track user clicks on the registration button. The goal tracking is wor ...

javascriptreactjsnext.jsyandexyandex-metrika

Two separate entities link to a shared occurrence

Two namespaces are at play here: '/' and /notification If I trigger an event in the '/' namespace, how can I listen to the same event in the '/notification' namespace? It would be helpful if someone could provide an explanati ...

javascriptnode.jsexpresswebsocketsocket.io

Updating the value of a MongoDB item two days after its creation

I've been working on a NodeJS application that stores form data in a MongoDB database collection. My goal is to implement a function that can modify certain values of the object in the database collection 48 hours after the form data is initially save ...

javascriptnode.jsmongodbexpressmongoose

Combine two arrays of objects and merge properties using the Ramda library

I have two arrays as shown below: ['TAG.u', 'TAG.c'] and the other one is: [{name:'some',key:'TAG.u'}, {name:'some new', key: 'TAG.b'}, {name:'some another' , key:'TAG.c'} ...

javascriptarraysjsonramda.js

Tips for updating a URL using data obtained from a JSON response

As I loop through an array from JSON, I extract all the necessary information. For example, if I have cards for blog posts that include the title, short description, published date, and URL. When clicking on a card, it redirects to a corresponding page ba ...

javascriptreactjsurli18next

Looking to display parent and child elements from a JSON object using search functionality in JavaScript or Angular

I am trying to display both parent and child from a Nested JSON data structure. Below is a sample of the JSON data: [ { "name": "India", "children": [ { "name": "D ...

javascriptangulartypescript

Trigger a Vuex action from a component once a mutation has finished

I am facing a situation with my Vue component where I need to call a Vuex action in the create hook. This action, an api.get request, fetches data and then dispatches a mutation. Once this mutation is completed, I have to trigger an action in another store ...

vue.jsasynchronousvuexstore

How can you effectively transfer arguments from one component to another using router.push() in Vue.js?

I need help with implementing a feature where upon clicking the edit button in a row, all the details from that particular row should be passed to a form component. I want to populate the form fields with default values from the parameters provided. Can ...

javascriptvue.jsparameter-passingvue-router

Using Nuxtjs/Toast with personalized image emblems

Would it be possible to include an icon in a toast error message, or is there a need to install another module for this functionality? I am currently using vue and attempting to integrate a component as an icon, but so far without success. this.$toast.er ...

javascriptvue.jsnuxt.js

Implementing concurrent operations in React Native using Firebase, combining async/await with Promise.all

import fire from '../config/fire'; const db = fire.firestore(); class InitialDb extends Component { constructor(props) { super(props); this.state = { schools: '', students: '', }; } async compo ...

javascriptreactjsreact-nativeasync-awaites6-promise

How can I combine an ordinary image and a CSS2D image in THREE.js CSS2DRenderer and save them together as a single .jpg file?

After implementing the following code... (1) I successfully saved regular rendered THREE.js scenes as .jpg files; (2) Additionally, I managed to utilize CSS2DRenderer to display CSS2D labels on top of the canvas; (3) Now, my goal is to save the image wi ...

javascriptcssthree.js

Develop a cutting-edge front end for Hyperledger Fabric 2.2 with React js and enhance it with a node

Currently, I have developed a unique hyperledger fabric 2.2 blockchain network using javascript and am looking to integrate it with a React.js front end utilizing the node.js API. Despite my efforts to find relevant examples, most resources focus on hyperl ...

javascriptnode.jsreactjshyperledger-fabric

How can you target the current component and use createElement within VueJS?

My goal is to gain access to the current component and generate a div within it once the component is ready. The following is the code snippet for my component, which demonstrates my attempt to target the this element and create a new div within it using ...

javascriptvue.jsvuejs2

Using global variables for mocha testing (and babel setup)

Currently, I am developing a library using es6 and transpiling it with babel via webpack and npm. However, I have encountered an issue where my library has a dependency on some code that cannot be modified but is required for my library to function properl ...

javascriptnode.jsnpmmocha.jsbabeljs

"Adjusting Material UI Select Size - A Guide to Resizing Your

Struggling with getting Material UI selects to work properly with height and width using 'vh' and 'vw', as well as adjusting text size with 'vh'. The boxes have the correct size, but the label text is no longer centered due t ...

javascriptreactjsmaterial-ui