creating a list of checkboxes with v-for in Vue.js

Having a bit of trouble with CheckBox selection. I am looping through a DataTable and adding CheckBox to it, storing them as an Array. My goal is to have the functionality where selecting the left checkbox removes the right one, and vice versa for the right tick.

<tbody>
      <tr v-for="(item, index) in PersonalDocument" :key="item.doc_id">
        <th scope="row">{{ index + 1 }}</th>
        <td>{{ item.doc_id }}</td>
        <td>{{ item.doc_name }}</td>
        <td>
          <input
            type="checkbox"
            class="form-check-input"
            v-model="temp_doc_file"
            :value="{
              doc_id: item.doc_id,
              doc_status: 0,
            }"
          />
        </td>
        <td>
          <input
            type="checkbox"
            class="form-check-input"
            v-model="temp_doc_file"
            :value="{
              doc_id: item.doc_id,
              doc_status: 1,
            }"
          />
        </td>
        <td></td>
      </tr>
    </tbody>

Answer №1

If you want to implement checkboxes as a radio button alternative, make sure to include the @change event on both checkboxes and define the functionality within YourMethod(). template

 <script setup>
    import { ref } from 'vue'
    
    const PersonalDocs = ref([
    {doc_id : 1, doc_name: 'heehhe'},
    {doc_id : 2, doc_name: 'heerrrrrhhe'},
    ])
    
    const tempDocFile = ref({})
    const checkValues = ref({})
    
    const message = ref('Hello World!')
    function YourMethod(index, side) {
          const leftChkId = 'left' + index;
          const rightChkId = 'right' + index;
          const leftChk = document.getElementById(leftChkId);
          const rightChk = document.getElementById(rightChkId);
          if (side === 'left') {
            if (leftChk && rightChk) {
              if (leftChk.checked) {
                tempDocFile.value = {
                  doc_id: PersonalDocs.value[index].doc_id,
                  doc_status: 0,
                };
                rightChk.checked = false;
              }
            }
          } else if (side === 'right') { 
              if (leftChk && rightChk) {
                if (rightChk.checked) {
                  tempDocFile.value = {
                    doc_id: PersonalDocs.value[index].doc_id,
                    doc_status: 1,
                  };
                  leftChk.checked = false;
                }
            }
          } 
          
             console.log('test', tempDocFile.value)
        }

    </script>
    
    <template>
     <tr v-for="(item, index) in PersonalDocs" :key="item.doc_id">
            <th scope="row">{{ index + 1 }}</th>
            <td>{{ item.doc_id }}</td>
            <td>{{ item.doc_name }}</td>
      <td>
              <input
                type="checkbox"
                :id='"left"+index'
                class="form-check-input"
               
               @change="YourMethod(index, 'left')"
              />
            </td>
            <td>
              <input
                type="checkbox"
                :id='"right"+index'
                class="form-check-input"
                
                @change="YourMethod(index, 'right')"
              />
            </td>
            </tr>
    </template>

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

Attempting to categorize JSON object elements into separate arrays dynamically depending on their values

Here's the JSON data I'm currently working with: ?$where=camis%20=%2230112340%22 I plan to dynamically generate queries using different datasets, so the information will vary. My main objective is to categorize elements within this array into ...

Attempting to bring in an image file into a React component

My attempt to add an image at the top of my file failed, so I am looking for help with importing it. The code I originally tried did not work. The image does not display using the code below <img src={require('../../blogPostImages/' + post.bl ...

I'm attempting to integrate the map function into my React Redux application, but after implementing useDispatch, I'm encountering an error message in the console

I am currently troubleshooting an app I'm working on, but I keep encountering errors in the console. Included below is a picture of the error as well as the code snippet triggering the issue. Can anyone provide insight into what might be causing this ...

When browserify is utilized, the error "function is not defined" may show up as an Un

Exploring an example at and attempting a function call as shown below: My HTML code is: <!DOCTYPE html> <html> <head> <title>Testing Browserify</title> <script src="bundle.js"></script> </head> <body& ...

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

I have a question... If you're interested in conditional styling, the best approach is to utilize either ng-class or ng-style. However... For instance, let's say I'm an admin and I would like to customize the color of my application using ...

Utilizing AngularJS to bind form fields with select boxes to enable synchronized data. Modifying the selection in the dropdown should dynamically

Currently, I am working on an input form that involves a select with various options. Depending on the user's selection, three additional fields need to be populated accordingly. For instance: If the user picks Option1, then the three other fields s ...

Exploring the possibilities of socket.io-client in combination with Vite.js and Vue for seamless real

I am currently diving into socket.io for my upcoming Vue project, but I seem to be encountering some issues. Interestingly, everything works smoothly when I use vue-cli, however, I prefer working with Vite.js due to its speed and customization options. Unf ...

Is it possible to toggle the status of an item in JSON based on a counter value

Here is the JSON data I have: "questions": { "id": 1, "question": "Select one color", "answers": [ {"id": 1, "answer" : "Green", "isSelected" : false}, {"id": 2, "answer": "Red", "isSelected" : false}, ...

Using Jquery, Javascript, or Ajax to deactivate the iframe by clicking on it

Whenever a link in an iframe is clicked, I need to close the iframe and div elements. I have seen websites that are able to achieve this functionality, but I can't remember the specific URLs. A while ago, I copied this code from a website to detect ...

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

What is the method for executing code in HTML without needing a beginning or ending tag?

I have created a code that creates a shape which alternates between the colors green and blue, along with changing text from 'Hi' to 'Hello' when a button is clicked. Now, I am looking for a way to make this transition happen automatica ...

Looking to develop a dynamic password verification form control?

I am in the process of developing a material password confirmation component that can be seamlessly integrated with Angular Reactive Forms. This will allow the same component to be utilized in both Registration and Password Reset forms. If you would like ...

What causes the difference between object[key] and Object.key in JavaScript?

After running the following code snippet, I observed that "typeof object[key]" is displaying as a number while "typeof object.key" is showing undefined. Can anyone explain why this unusual behavior is occurring? var object = {a:3,b:4}; for (var key in o ...

Instructions on inserting an IFRAME using JavaScript into dynamically loaded content via AJAX

How can I dynamically add an IFRAME using JavaScript to content that is refreshed via AJAX? Consider the following example: $('#bar').delegate('.scroll-content-item span a', 'click', function() { var object_id = $(this).p ...

At what point is a $.cache considered oversized?

After coming across a fascinating tutorial, I learned that certain memory leaks in jQuery can be identified by monitoring the size of the $.cache variable. It was emphasized to always keep an eye on its size, as it could indicate potential issues if it bec ...

JavaScript does not display checkbox values

I am currently testing whether checkbox values appear on the client side. When I execute the code, the alert is not showing anything. I would greatly appreciate any assistance, thank you. <div> <label name="finishing"class=" ...

Utilize parent styles in Vue.js component by extending them

I have a third-party component that I am extending. While I want to reuse the template and style sections, I need to modify its behavior. My vue file looks like this: <script> import Foo from 'foo'; export default { name: 'Bar' ...

Can you provide me with information on how to retrieve data from a Yahoo Finance JSON file using Node.js?

I have created a simple request function to fetch JSON data from the Yahoo Finance API, but I am encountering difficulties in extracting information from the JSON response. Here is my code: var request = require("request"); var stock_url = "http://finan ...

Multiple executions of Ajax callback detected

I am trying to utilize an ajax-call to a script that searches for numbers. The response is expected to be a json array containing names and surnames as strings. However, I am facing an issue where the script seems to be looping and sending multiple respons ...

Can the grunt command be executed automatically after saving code in TypeScript?

As a newcomer to FrontEnd and JavaScript coding in TypeScript, I find myself constantly needing to follow these steps after making a code change: save the code -> compile it using Grunt -> reload the webpage. It can be quite time-consuming. Is there ...