Utilizing VueJS to target and select checked checkboxes across various divs

Question

Utilizing VueJS to target and select checked checkboxes across various divs

As someone who is still getting the hang of VueJS, I've come across a challenge that would have been a breeze to tackle with jQuery. However, when it comes to VueJS, I'm struggling to find a solution even though I know it's possible.

Here's the scenario: I have a list of paths selected by the user, and for each path, I need to create a div with three checkboxes - add, edit, and delete.

Let's say the user selects two paths: '/foo' and '/bar'. For these paths, I need to generate the following object based on the checkboxes checked:

[
{path: '/foo', actions: ["add","edit"]}, 
{path: '/bar' , actions: ["delete"]}
]

The function responsible for creating this object is triggered when the user hits a final submit button. Below is a snippet of the relevant code:

In the component template:

<li v-for = "selectedPath in newProfile.paths">
                <Card :card-name="selectedPath">
                    <h5>{{selectedPath}}</h5>
                    <base-checkbox :data-path="selectedPath" type = "default" name = "add">Add</base-checkbox>
                    <base-checkbox :data-path="selectedPath" name = "edit">Edit</base-checkbox>
                    <base-checkbox :data-path="selectedPath" name = "delete">Delete</base-checkbox>
                </Card>
            </li>

The JavaScript code includes vanilla JS to handle checkbox selection. The issue arises from using predefined checkboxes within a template, making it cumbersome to access the checked attribute directly. This approach feels clunky and not in alignment with VueJS best practices.

So, how can I successfully construct the desired object based on the checkboxes checked within each div?

javascript vue.js

Answer 1

Answer №1

To effectively manage your base-checkbox components in Vue, it is crucial to listen for events and update corresponding data structures accordingly. Remember that in Vue, JavaScript data serves as the primary source of truth over the DOM.

Approaching this task can vary depending on the most suitable data structures for a specific scenario. As stated in The Mythical Man-Month:

Representation is the essence of programming.

Considering this, the example below may not be utilizing the best data structures or handling them optimally:

Key points to note:

The computed property out contains the final formatted data used upon clicking the submit button. Although no submit button is included here, the data is presented for review purposes.
Maintaining separate paths and selectedPaths entities is not mandatory but aligns closely with your original code, with paths similar to newProfile.paths.
The format within selectedPaths follows
```
{path1: {add: true, edit: false, delete: true}, path2: ...}
```
. Properties are lazily created, defaulting to all checkboxes being false.
Since selectedPaths is initially empty, its properties lack reactivity, hence the use of $set. If prepopulating this object within the data method was feasible, omitting $set would suffice.
Checkbox elements are employed here, but a similar approach applies when using a checkbox component. A prop conveys the current value, while an event updates the data upon value alteration.
For scenarios involving v-for, segregating a distinct child component for children often simplifies operations by distributing workloads onto individual children components instead of manipulating complex parent data structures. Though not implemented here to keep everything within one component, exploring this approach in real-world scenarios is beneficial.

<template>
    <div>
        <ul>
            <li v-for="path in pathsWithSelections" :key="path.path">
                {{ path.path }}
                <input type="checkbox" :checked="path.add" @input="onChecked(path.path, 'add')">
                <input type="checkbox" :checked="path.edit" @input="onChecked(path.path, 'edit')">
                <input type="checkbox" :checked="path.delete" @input="onChecked(path.path, 'delete')">
            </li>
        </ul>
        {{ out }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                paths: ['path1', 'path2', 'path3'],
                selectedPaths: {}
            }
        },

        computed: {
            pathsWithSelections () {
                return this.paths.map(path => {
                    const selected = this.selectedPaths[path] || {}

                    return {
                        path,
                        ...selected
                    }
                })
            },

            out () {
                const out = []

                for (const path of this.pathsWithSelections) {
                    const actions = []

                    for (const action of ['add', 'edit', 'delete']) {
                        if (path[action]) {
                            actions.push(action)
                        }
                    }

                    if (actions.length) {
                        out.push({
                            path: path.path,
                            actions
                        })
                    }
                }

                return out
            }
        },

        methods: {
            onChecked (path, action) {
                const selectedPaths = this.selectedPaths

                const selected = selectedPaths[path] || {}

                this.$set(selectedPaths, path, selected)
                this.$set(selected, action, !selected[action])
            }
        }
    }
</script>

Answer 2

To effectively manage your base-checkbox components in Vue, it is crucial to listen for events and update corresponding data structures accordingly. Remember that in Vue, JavaScript data serves as the primary source of truth over the DOM.

Approaching this task can vary depending on the most suitable data structures for a specific scenario. As stated in The Mythical Man-Month:

Representation is the essence of programming.

Considering this, the example below may not be utilizing the best data structures or handling them optimally:

Key points to note:

The computed property out contains the final formatted data used upon clicking the submit button. Although no submit button is included here, the data is presented for review purposes.
Maintaining separate paths and selectedPaths entities is not mandatory but aligns closely with your original code, with paths similar to newProfile.paths.
The format within selectedPaths follows
```
{path1: {add: true, edit: false, delete: true}, path2: ...}
```
. Properties are lazily created, defaulting to all checkboxes being false.
Since selectedPaths is initially empty, its properties lack reactivity, hence the use of $set. If prepopulating this object within the data method was feasible, omitting $set would suffice.
Checkbox elements are employed here, but a similar approach applies when using a checkbox component. A prop conveys the current value, while an event updates the data upon value alteration.
For scenarios involving v-for, segregating a distinct child component for children often simplifies operations by distributing workloads onto individual children components instead of manipulating complex parent data structures. Though not implemented here to keep everything within one component, exploring this approach in real-world scenarios is beneficial.

<template>
    <div>
        <ul>
            <li v-for="path in pathsWithSelections" :key="path.path">
                {{ path.path }}
                <input type="checkbox" :checked="path.add" @input="onChecked(path.path, 'add')">
                <input type="checkbox" :checked="path.edit" @input="onChecked(path.path, 'edit')">
                <input type="checkbox" :checked="path.delete" @input="onChecked(path.path, 'delete')">
            </li>
        </ul>
        {{ out }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                paths: ['path1', 'path2', 'path3'],
                selectedPaths: {}
            }
        },

        computed: {
            pathsWithSelections () {
                return this.paths.map(path => {
                    const selected = this.selectedPaths[path] || {}

                    return {
                        path,
                        ...selected
                    }
                })
            },

            out () {
                const out = []

                for (const path of this.pathsWithSelections) {
                    const actions = []

                    for (const action of ['add', 'edit', 'delete']) {
                        if (path[action]) {
                            actions.push(action)
                        }
                    }

                    if (actions.length) {
                        out.push({
                            path: path.path,
                            actions
                        })
                    }
                }

                return out
            }
        },

        methods: {
            onChecked (path, action) {
                const selectedPaths = this.selectedPaths

                const selected = selectedPaths[path] || {}

                this.$set(selectedPaths, path, selected)
                this.$set(selected, action, !selected[action])
            }
        }
    }
</script>

Utilizing VueJS to target and select checked checkboxes across various divs

Answer №1

Similar questions

Preventing users from returning to the login screen by pressing the back button in their browser when using Vue-router

Apollo-Server presents errors in a polished manner

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?

Using Angular directive with ng-class to display or hide element

Http Angular service lacks a provider

Ensuring the Line Breaks in CSS and JavaScript to Easily Modify the Style

Increase the size of a centered image within a table

What methods can be used to verify if an Ajax request was actually sent by the server?

Vue.js: Issue with applying class binding while iterating over an object

Encountering issues retrieving data using Vuex in combination with axios

Is there a way to access the real-time data outside of the window resize event?

The HTML document is wider than the screen

Neither the context nor props contain the element 'store' that you are searching for

Having trouble retrieving information from the database using socket.io and node.js

The angular 2 router is failing to navigate properly when using the history forward/backward button

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

When the icon is clicked, the text goes over the ul and the mobile slide menu goes beneath it

How do I recognize the combination of Click and modifier keys (Shift, Ctrl, Alt) in a reactjs click event?

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Sending multiple arguments using a JavaScript .NET postback