Acquiring the checkbox value with Vue.js

Hey there, I'm new to Vue and seeking some guidance.

I'm working on building a filter bar that will display checked options in a collection view. For example, if "T-shirts" is checked, it should show all T-shirts from the database.

Currently, I am fetching beer values from my database and displaying them in the filter box:

<div class="overflow menu-list">
    <ul>
      <li v-for="brewery in breweryName">
        <input type="checkbox" name="beer">{{brewery}}
      </li>
    </ul>
  </div>

Here is how my Vue instance is set up:

var filterVM = new Vue({
  el: '#filter-bar',
  data : {
    breweryName : grabFromBeerDB("brewery"),
    beerStyle : grabFromBeerDB("style"),
    checkedBrewery : []
  },
  firebase : {
    beerList: beerDatabaseRef
  }, ...

My main question is how can I dynamically capture the values of the checked boxes?

Thank you for your assistance.

Answer №1

Simply utilize the v-model directive

<input type="checkbox" name="beer" value="A" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="B" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="C" v-model="checkedBrewery">

See documentation here: https://v2.vuejs.org/v2/guide/forms.html#Checkbox

Answer №2

    <li v-for="brewery in breweryName">
        <input type="checkbox" name="beer" :value="brewery" v-model="checkedBrewery">
       {{brewery}}
    </li>

Ensure that each checkbox input has a unique value to meet the required criteria.

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

How can I obtain the attribute to insert it into my src? I am not very familiar with this process and would appreciate some

I keep receiving the result "undefined": Here is my JavaScript code: document.getElementById("myImg").src = "hackanm"+x+".gif"; var x = document.getElementsByTagName("img")[0].getAttribute("data"); This is my HTML code: <img data="WhatIWantToAdd" id ...

Automatically change and submit an <input> value using jQuery

I have been working on a prototype to enable users to access all the data associated with a visualization. The idea is that they would click on a specific point, triggering a modal to appear, and within that modal, a table would dynamically filter based on ...

Ways to resolve the error message "Type 'Promise<{}>' is missing certain properties from type 'Observable<any>'" in Angular

Check out this code snippet: const reportModules = [ { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } }, { url: 'application1', params: { to: for ...

Instructions on how to automatically update the label of a <v-file-input> with the value selected from a <v-select> in Vuetify

As a novice, I am currently working on creating a Vuetify form that includes three <v-file-input> elements, each with a corresponding <v-select> option. My goal is to update the label of each <v-file-input> with the selected value from it ...

What is the best way to deactivate a button when not all inputs require filling?

I need to make a change in my form where I want to disable a button, but not all the inputs are mandatory. Even though I have specified which inputs need to be filled in the code, I still have to fill all the inputs in the form. How can I modify this? $ ...

How to remove the horizontal scrollbar from material-ui's Drawer element

My drawer is displaying a horizontal scroll, despite my efforts to prevent it. I've tried adjusting the max-width and width settings in Menu and MenuItems, as well as using box-sizing: border-box. I also attempted setting overflow: hidden on the Drawe ...

Is it possible to assign a variable property name to ngStyle in Angular?

Can you use a dynamic property name with ngStyle? For instance: <div [ngStyle]="{ propertyName: '0px'}"></div> The propertyName is specified in the component and can be left or right, etc. ...

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

Unusual situation involving the override of a function pointer variable

Let's explore a straightforward scenario: (function x(){ var foo = function(){ console.log('foo is alive!'); // set 'foo' variable to an empty function, using a delay setTimeout(function(){ foo = function(){}; ...

Concealing additional elements using a single input field

Could you please assist me with a quick solution for my Javascript code? I have an input field that hides a DIV element only if it is completely empty: if (search_value !== "") { document.getElementById("frei").className = "fre ...

Transforming the elements within an array of objects into individual key-value pairs and then adding them to a fresh array

Hello, I am diving into the world of Typescript/Javascript and encountering some challenges when it comes to manipulating arrays of data. Please bear with me as I navigate through my learning curve. Imagine having an array of objects structured like this: ...

Can custom directives incorporate comprehension expressions?

Is there a way to implement comprehension expressions similar to those used in ng-options, but for grouping radio buttons or checkboxes? app.js angular .module("app", []) .controller("controller", ["$scope", function($scope){ $scope.selec ...

Cloning a table row through editing functionality in ReactJS

Hey there, I'm currently working on implementing an edit feature in react.js. The current functionality is such that when the edit button is clicked, it displays the row data in the name and email address fields. If submitted without any changes, it c ...

Changing the background of a Muitextfield input element conceals the label

Struggling to customize the Textfield from the global theme? Can't seem to achieve a colored background for the input only (white) without obscuring the label when it moves inside the input. Desired result : https://i.sstatic.net/us2G7.png Current o ...

Is there a way to transfer the value of an angular 2 variable to a javascript function?

image description goes here Check out this picture I have. I am trying to pass the values of "c.name" and "c.image_Url" in an onclick function, as shown in the image. ...

Utilizing Sails.js: Invoking a YouTube service through a controller

I am facing an issue while trying to integrate Youtube Data API with Node.js in Sails.js. The problem lies with the "fs.readFile" function. Upon launching the service, it returns "undefined". Below is the code snippet for YoutubeService : module.exports ...

AngularJS handles intricate JSON responses effortlessly

I have been learning angularjs on my own, mostly from w3schools and other websites. I have been trying to download and parse some JSON data. I was successful with a simple JSON url (http://ip.jsontest.com), but I am struggling with a more complex response. ...

What is the correct way to generate an await expression by utilizing recast/esprima?

I have an issue with a JavaScript function export const cleanUp = async () => { await User.destroy({ where: {} }); }; I am attempting to add a line below await User.destroy({ where: {} }) using recast.parse(`await ${module}.destroy({ where: {} } ...

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

I have encountered a peculiar problem. It's strange to me because I can't figure out the root cause of it, despite trying everything in the Chrome Developer Tools debugger. Here is a snippet of code that works when I run it from a file on my desk ...

What could be the reason my hex code generator is outputting variable names instead of their assigned values?

I am currently working on developing a unique hex code generator using random values. At the moment, my focus is on displaying six random values in the HTML. // The characters A-F and numbers 0-9 can be utilized var button = document.querySelector(&quo ...