Vue 2 checkbox form array data

Question

Vue 2 checkbox form array data

Creating a checkbox list with a dynamic id and name:

Data:
yards[{id:1,name:'test'}] etc

HTML:
<ul class="checkbox-list">
     <template v-for="(yard, index) in yards">
                                <li>
                                    <input type="checkbox" 
                                        v-bind:id="'yardlist_'+yard.name"
                                        v-bind:value="yard.id"
                                        v-model="newSchedule.yards.id">
                                    <label v-bind:for="'yardlist_'+yard.name">{{ yard.name }}</label>
                                </li>
                                <li>
                                    <input type="text" 
                                        class="form-control"
                                        placeholder="Yard notes..."
                                        v-model="newSchedule.yards.notes">
                                </li>
                            </template>
                        </ul>

Storing selected checkboxes with id and notes field in an array:

newSchedule: {
            due_at: '',
            notes: '',
            users: [],
            yards: [{id:'',notes:''}]
        }

Error encountered when trying to access the index from the yards array: newSchedule.yards[index].notes - "TypeError: undefined is not an object (evaluating 'newSchedule.yards[index].id')"

Looking for suggestions on how to achieve this?

** Update ** Check out this example of what I'm looking to accomplish: https://jsfiddle.net/j7mxe5p2/13/

javascript arrays vue.js

Answer 1

Answer №1

It seems like there might be some confusion between traditional jQuery or JavaScript practices and working with the Vue framework. There is no need to manually set the id attribute on <input> elements in order to capture or manipulate their values.

The preferred method of handling this situation is as follows:

new Vue({
    el: '#app',
    data: function() {
        return {
            yards: [
                {id: 1, name: 'test', selected: true},
                {id: 2,name: 'test 2', selected: false},
                {id: 3,name: 'test 3', selected: false},
                {id: 4,name: 'test 4', selected: true}
            ]
        };

    },
    template: `
        <div class="list-of-yards">
            <label for="jack" v-for="yard in yards">
                <input type="checkbox" v-model="yard.selected"> {{yard.name}}
            </label>
        </div>
    `,
});

You can view a demonstration of this code on jsFiddle here: https://jsfiddle.net/z48thf9a/

A few key points to keep in mind:

Avoid using v-for directly on the top-level element within the template tag
Your template should contain a single enclosing element, typically a <div>, when using v-for
Instead of setting individual id attributes on input elements, utilize v-model for seamless data binding

If you encounter any difficulties, feel free to provide a jsFiddle link for further debugging assistance.

Update following comments #1 and #2:

The initial response focuses on setting up the Vue component and correctly linking checkboxes to your data model.

To extract the checked items into a separate array, consider implementing a computed property within the same component that filters through the original this.yards array to create a new array containing only selected items.

For an example demonstrating this functionality, refer to this modified jsFiddle: https://jsfiddle.net/z48thf9a/1/

You can customize this approach to extract only the relevant data, renaming variables like selectedYards to suit your application's needs.

If additional clarification is required or if you have more code snippets to share, please provide them so we can better address your concerns.

Answer 2

It seems like there might be some confusion between traditional jQuery or JavaScript practices and working with the Vue framework. There is no need to manually set the id attribute on <input> elements in order to capture or manipulate their values.

The preferred method of handling this situation is as follows:

new Vue({
    el: '#app',
    data: function() {
        return {
            yards: [
                {id: 1, name: 'test', selected: true},
                {id: 2,name: 'test 2', selected: false},
                {id: 3,name: 'test 3', selected: false},
                {id: 4,name: 'test 4', selected: true}
            ]
        };

    },
    template: `
        <div class="list-of-yards">
            <label for="jack" v-for="yard in yards">
                <input type="checkbox" v-model="yard.selected"> {{yard.name}}
            </label>
        </div>
    `,
});

You can view a demonstration of this code on jsFiddle here: https://jsfiddle.net/z48thf9a/

A few key points to keep in mind:

Avoid using v-for directly on the top-level element within the template tag
Your template should contain a single enclosing element, typically a <div>, when using v-for
Instead of setting individual id attributes on input elements, utilize v-model for seamless data binding

If you encounter any difficulties, feel free to provide a jsFiddle link for further debugging assistance.

Update following comments #1 and #2:

The initial response focuses on setting up the Vue component and correctly linking checkboxes to your data model.

To extract the checked items into a separate array, consider implementing a computed property within the same component that filters through the original this.yards array to create a new array containing only selected items.

For an example demonstrating this functionality, refer to this modified jsFiddle: https://jsfiddle.net/z48thf9a/1/

You can customize this approach to extract only the relevant data, renaming variables like selectedYards to suit your application's needs.

If additional clarification is required or if you have more code snippets to share, please provide them so we can better address your concerns.

Vue 2 checkbox form array data

Answer №1

Similar questions

Encounter an error while decoding JSON using Swift 5.2: "Unexpected dictionary found instead of an Array<Any>."

"Learn the process of incorporating a trendline into a line chart using Highcharts by manipulating the

Obtaining template attributes in CKEditor: A guide

Troubleshooting: Why isn't setMetadata working in NestJS from authGuards

"Utilizing a JavaScript array to track the start of the week and

What is the best way to change a byte array into an image using JavaScript?

What is the method for implementing an Inset FAB with Material UI in a React project?

Issues with retrieving object from processed JSON data

What could be the reason for the "begin" script failing to execute?

Guide for manually initiating the mouseleave event on a smartphone or tablet

Deploying an Angular 2 application using SystemJS and Gulp can sometimes feel cumbersome due to its

Assigning a session variable through a dropdown selection

Watching a Computed Value in EmberJS

What is the syntax for utilizing cookies within the `getServerSideProps` function in Next.js?

The detailed record of this run can be accessed at:

What is the best way to ensure that the HTML page is only shown once all data from three JSON files has been fully

Using Python within HTML with Python integration

Learn how to dynamically bind Font Awesome icons in Vue 3 with this easy tutorial

Updating cluetip content post webpage loading

margin-top: automatic adjustment, with a minimum of 50 pixels