How to Link an Object's Value to a Checkbox in Vue

My goal is to populate the array selectedParks with the value of each item. However, I am facing an issue where the value is always set to the string "item" instead of the actual value of the Park Object.

Here is the code snippet:

<ul class="list-group no-bullets">
    <li class="list-group-item" v-for="item in parks">
        <label><input type="checkbox" value="item" v-model="selectedParks"/> {{item.name}}</label>
    </li>
</ul>
<span>Checked: {{selectedParks}}</span>

I have confirmed that the item itself is correctly bound as {{item.name}} displays the correct value.

For more information on binding multiple checkboxes to the same array, you can check out the following documentation: https://v2.vuejs.org/v2/guide/forms.html

Answer №1

The reason for this is that when value is evaluated as a string, you must utilize v-bind to assign it as an object:

<input type="checkbox" v-bind:value="item" v-model="selectedParks"/>

Alternatively, you can use the shorthand with a colon:

<input type="checkbox" :value="item" v-model="selectedParks"/>

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

"Looking to display an image object retrieved from AWS S3 using a signed URL in Vue.js? Here's how you

<div v-for="(data, key) in imgURL" :key="key"> <img :src= "getLink(data)" /> </div> imgURL here is an array that contains file names. methods: { async getLink(url){ let response = await PostsService.downloadURL({ i ...

Tips for focusing on v-text-field and clearing the value:

Is there a way to clear the value of a v-text-field when it is focused on? I attempted using the onFocus attribute, but nothing happened. I am looking to empty the value when the field is in focus without relying on the built-in clearable button from vuet ...

In Internet Explorer 11, React 15.4.1 does not support using objects as valid child components

When trying to render a collection of children in React, make sure to use an array instead of objects. If you encounter the error "Objects are not valid as a React child," consider wrapping the object using createFragment(object) from the React add-ons. Do ...

Exploring the intricacies of binding to object properties within a component

I am currently working on creating a customizable Vue.js checklist component: It will be implemented as follows: <check-list :items="myItems" text-property="name" /> Component Definition: <template> <div class="form-control item-contai ...

Ways to determine if an HTML element contains a child element that is a hyperlink

I need to verify the presence of an object on the page that contains a link. The object is represented as follows: <td > <input class="ng" type="checkbox"/> <a href="http://testsite.com ">67365853</a> </td> Although ...

Restricting the number of times a user can click on

I am currently displaying a table with data obtained from a database query. The structure of the table is outlined below: <table id="dt-inventory-list" class="table table-responsive"> <thead> <tr> <th>Field ...

The declaration for "Control" is not present, possibly being restricted by its protection level

I'm really struggling to get the jQuery datepicker working in ASP.NET. I've tried various examples, but nothing seems to work for me. Even though I'm fairly new to ASP.NET, I am learning quickly! Here is the script I am trying to use: < ...

There seems to be an issue with the VueJs + ElementUi Change method as it is

Just starting out with Vue and Element UI. I'm attempting to create a custom component using the ElementUI autocomplete/select feature. The problem I am facing is that the @change method does not contain a event.target.value value. When I try to acc ...

I am interested in excluding the seconds and milliseconds from my date and time

I currently display my time in the following format: 5:34 PM I only want to show the hour and minute. How can I achieve this? ...

Is it possible to use a JavaScript string as a selector in jQuery?

So, my issue is with the following JavaScript code snippet: for ( i=0; i < parseInt(ids); i++){ var vst = '#'+String(img_arr[i]); var dst = '#'+String(div_arr[i]); } I'm wondering how I can proceed in jQuery to handle ...

Issues with Vue router lazy loading causing the failure to generate individual chunk files

I've been attempting to incorporate lazy loading into my routes, but I'm encountering some difficulties. Here's a snippet of how my index.js files in the router folder are set up: import Vue from "vue"; import VueRouter from "vue-router"; i ...

When does the React state update warning occur on an unmounted component?

When is the appropriate time to verify if a component has been mounted? I frequently encounter a warning in the title when using setState calls. To avoid this warning, I have started declaring a variable and initializing it to true in componentDidMount, t ...

Counter is effective for the initial post, yet it does not function properly for the subsequent post

Can anyone help with an issue I'm having with my JavaScript counter? It works for the first comment, but not the second one. This problem persists whether I use PHP or JavaScript. Below is the JavaScript code for the counter: var count = (function() ...

Learning the process of connecting functions to events

// param {id:'buttonId', action : function(event[,param1, param2] ){}, behavior:function(event[,param1, param2] ){} } CustomButton = function(parameters) { var buttonElement = document.getElementById(parameters.id); // how c ...

Adjust the styling of the anchor tag within the selected div by utilizing jQuery

I am struggling with changing the color of a specific anchor tag when clicked inside a div with class .product_wishlist. Currently, all anchor tags within .pw div are changing colors. Is there a way to apply selected css only to the clicked element? Any he ...

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source ...

Covering a doughnut shape with a twisting spiral

I want to achieve a hula hoop covered in tape effect using three.js. The 3D model should look similar to the image below. https://i.sstatic.net/lj9cR.jpg I have been able to create the hoop in 3D space using TorusGeometry and pan around, but I am strugg ...

A step-by-step guide to thoroughly examining the form status in a React application, allowing for the activation of a previously disabled submit button

When I have an onChange event in React, the state is populated correctly. I disable the form button when a field is empty on submit, but I also want users to be able to go back and fill out those fields. The key issue is that if both fields have data, I wa ...

Utilize Node JS to assign variables to HTML form inputs

Can anyone help me with storing HTML form inputs in variables using Node JS? I'm having trouble getting it to work properly. Below is the HTML form snippet: <form action="localhost:8080/api/aa" method="post"> <input id="host" type="text ...

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material alw ...