Enhance the presentation of checkboxes using the dynamic capabilities of Vue.js

My form is set up with category labels and check boxes for each category as shown in the images below:

https://i.sstatic.net/nsfV7.png

I am using axios to fetch data from a Google sheet in this specific format:

https://i.sstatic.net/tgtWP.png

This is the script I have implemented to retrieve the values: 

data() {
    return {
      form: {
        email: "",
        name: "",
        phoneNo: "",
        checked: []
      },

      sports: [],
      arts: [],
      dance: [],
      show: true
    };
  },
  methods: {
    getCcaList() {
      this.axios
        .get(
          "(Google sheet batch get API)"
        )
        .then(response => {
          let cellValues = response.data.valueRanges[0].values;

          // Manipulate the cellValues array to populate appropriate categories
          for (let i = 0; i < cellValues[0].length; i++) {
            if (cellValues[1][i] === "Sports")
              this.sports.push(cellValues[0][i]);
            else if (cellValues[1][i] === "Arts")
              this.arts.push(cellValues[0][i]);
            else if (cellValues[1][i] === "Dance")
              this.dance.push(cellValues[0][i]);
          }
        });
    }

The design of my HTML with vue-bootstrap looks like this:

<label for="sports">Sports:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="sports" :options="sports" stacked buttons></b-form-checkbox-group>
<br />

<label for="dance">Dance:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="dance" :options="dance" stacked buttons></b-form-checkbox-group>
<br />

<label for="arts">Arts:</label>
<br />
<b-form-checkbox-group v-model="form.checked" name="arts" :options="arts" stacked buttons></b-form-checkbox-group>

I'm exploring ways of creating the above structure without needing to adjust arrays when adding or removing categories in the spreadsheet.

One approach I've attempted involves using a dictionary to store values from the Google sheet and then utilizing v-for to display the category values. However, I'm encountering difficulties in displaying each value in the club array based on their respective categories.

[
    { category: "Sports", club: ["Basketball", "Soccer", "Archery"] },
    { category: "Dance", club: ["Salsa"] },
    { category: "Arts", club: ["Painting", "Choir", "Band", "Drawing"] },
]
javascriptvue.jsvuejs2

Answer №1

Your idea of implementing a dictionary is spot-on, but you need to tweak the template slightly. I've set up a sandbox with an example:

Check out this link for the sandbox example

The main concept involves utilizing the dictionary like this:

 categories: [
    { category: "Sports", club: ["Basketball", "Soccer", "Archery"] },
    { category: "Dance", club: ["Salsa"] },
    { category: "Arts", club: ["Painting", "Choir", "Band", "Drawing"] }
  ],

You can loop through it using v-for in your code:

<div v-for="c in categories" :key="c.category">
<label :for="c.category">{{c.category}}:</label>
  <br>
  <b-form-checkbox-group
    :name="c.category"
    v-model="form.checked"
    :options="c.club"
    stacked
    buttons
  ></b-form-checkbox-group>
</div>

This way, whenever you introduce a new category, the template will accommodate it seamlessly.

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

I have expanded the CSSStyleDeclaration prototype, how do I access the 'parent' property?

I have developed some custom methods for CSSStyleDeclaration and implement them like this: A_OBJECT.style.method() ; The code structure is quite simple: CSSStyleDeclaration.prototype.method = function () { x = this.left; ..... etc } Here's my que ...

javascriptcss

Mixing colors in THREE.js vertex shader based on height levels

How can I change the color of the mesh to blue only when the height is zero? Currently, I am using a mixture of colors: https://i.sstatic.net/x3s4d.png The issue with this blending method is that it lacks precision. I want the color blue to appear only ...

javascriptcolorsthree.jsglsl

Validation works correctly during keyup events, but is ineffective during keypress events

When using the input box, there are certain validations in place: 1) The length input box should accept up to 3 integer values (no decimals). 2) The height input box should accept 3 integer numbers and decimals up to 2 places. Initially, everything works ...

javascriptangularjs

Detecting URL changes, excluding just the hash, with JavaScript/jQuery

It's interesting to note that some websites are built using a "one-page system". In this type of system, when a user clicks on a link, the site doesn't take them to a new page but instead reloads the existing page with Ajax and updates the URL. ...

javascriptjqueryajaxwindow

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs

Adding a condition prior to inserting rows into a table using jQuery

Seeking advice on implementing an HTML template that includes a table and an add button. When the add button is clicked, selections are meant to be added to the table. The requirement is to introduce a condition where if one of the selections contains "Map ...

javascriptjquery

Utilizing JQuery to Duplicate Table Section Inside a Form

I am working on a form inside a table and I need to create a section within the table that can be repeated by the user. This will allow them to add more sections if they desire. To achieve this, I am using JQuery. Here is a snippet of my HTML code: < ...

javascriptphpjqueryhtml-table

How can I trigger a JavaScript function on a button click within an ASP.NET web form?

I'm having trouble calling a JavaScript function on an ASP.net webform when a button is clicked. I have added the .js file to the application, but for some reason, the button is unable to reference the .js file. A Javascript runtime error is appearing ...

javascripthtmlasp.netvisual-studio

Creating a tooltip that doesn't rely on any child elements

I've been experimenting with creating a tooltip that appears when hovering over an <a> tag and displays a <div> from another location For example: <p> blah blah <a class="tooltiphover">hover me</a> blah blah &l ...

javascripthtmlcsstooltip

Add the search outcome to the input field in vue

Within this section, I have implemented an @click event <h2 @click="action(customer.id)">{{ customer.name }}</h2> My goal is to append the clicked result to the input when any result is clicked. Do you have any ideas on how to achieve this? ...

vue.jsvuejs2

Ways to eliminate all characters preceding a certain character within an array dataset

I am currently working on parsing a comma-separated string retrieved from a web service in my application, which contains a list of user roles. My goal is to convert this string into an array using jQuery, and I have successfully achieved that. However, I ...

javascriptjqueryarraysarraylist

Breadcrumb navigation that is determined by data hierarchies and relationships between parent and child items

I am looking to implement a dynamic breadcrumb system on my website using data-driven methodology. The necessary data is stored in a MariaDB database and has the following structure: parent_id | parent_name | child_id | child_name ——————— ...

javascriptphpmysqld3.jsmariadb

Conceal Gridview Columns

My current approach involves using the HeaderText to show or hide columns in an asp:GridView. However, I now need to have no display text for the HeaderText, and I am unsure how to adjust this syntax to still show/hide columns based on a button click. Be ...

javascriptc#jqueryasp.netdatagridview

The technique of using Javascript x to escape characters is

I've come across a handful of other software programs that feature a similar construct: let str = '\x32\x20\x60\x78\x6e\x7a\x9c\x89'; As I experimented with the sequence of numbers and letters within ...

javascriptstringescapingasciiprocessing

Attempting to access a variable from outside the function

I am looking to pass the index variable from mapping to the event change function in my code snippet below: {this.data && this.data.map((item, index) => ( <tr className="table-info" key={index}> <td>{index}</ ...

javascriptreactjsreact-routerjsx

Tracking user engagement and traffic on a website with a single tracking ID for both screenviews and pageviews

I'm facing an issue while attempting to send screenviews and pageviews using the same tracking ID in my AngularJS web app. The error message I keep encountering is as follows: Access denied. Please try relaunching In-Page Analytics from the report. ...

javascripthtmlangularjsgoogle-analytics

It's incredibly frustrating when the Facebook like button is nowhere to be found

Currently, I am in the process of developing a website for a local bakery and have decided to incorporate a Facebook like button on the homepage. After visiting developers.facebook, I proceeded to copy and paste the code provided. It appears that there use ...

javascripthtmlcssfacebook

What is the best way to create shaded areas upon clicking them?

How can I implement shading on areas when they are clicked? Contractor Form (Package One) <area id="39" name ="39" alt="" title="39" href="#" shape="poly" coords="12,204,12,120,138,117,144,72,248,72,252,124,526,125,632,81,668,157,698,149,722,2 ...

javascriptjqueryhtmlcssajax

Applying a switch case to dynamically alter the background image using CSS depending on the specific case

Currently, I am working on implementing a feature that allows users to switch the background image of the cropper based on the crop operation ratios they select (SQUARE/PORTRAIT/LANDSCAPE). To achieve this, I plan to set three variables representing each ...

javascriptjqueryswitch-statement