storing label text from checkboxes as an array in a Vue.js component

Question

storing label text from checkboxes as an array in a Vue.js component

I need to save the selected checkbox label names in an array.

<template>
<div class="q-gutter-sm">
              <q-checkbox dense v-model="add_info" label="Data Structures and Algorithms" color="teal" /><br />
              <q-checkbox dense v-model="add_info" label="High Level Design" color="teal" /><br />
              <q-checkbox dense v-model="add_info" label="Low Level Design" color="teal" /><br />
              <q-checkbox dense v-model="add_info" label="Development (Backend, Frontend, Fullstack)" color="teal" />
            </div>
</template>

<script setup>
import { ref } from 'vue'


const add_info = ref([])

</srcipt>

javascript arrays vue.js quasar-framework

Answer 1

Answer №1

This particular solution is working really well

<script setup>
import { ref } from 'vue'

const selectedLabels = ref([])
</script>

<template>
  <div>
    <p>array of selected labels {{ selectedLabels }}</p>
    <input type="checkbox" id="checkbox" v-model="selectedLabels" value="awesomeLabel" />
    <label for="awesomeLabel">This label is simply awesome!</label>
  </div>
</template>

View the implemented code here

PS: if desired, you can treat awesomeLabel as another ref for reusability purposes.

Answer 2

This particular solution is working really well

<script setup>
import { ref } from 'vue'

const selectedLabels = ref([])
</script>

<template>
  <div>
    <p>array of selected labels {{ selectedLabels }}</p>
    <input type="checkbox" id="checkbox" v-model="selectedLabels" value="awesomeLabel" />
    <label for="awesomeLabel">This label is simply awesome!</label>
  </div>
</template>

View the implemented code here

PS: if desired, you can treat awesomeLabel as another ref for reusability purposes.

storing label text from checkboxes as an array in a Vue.js component

Answer №1

Similar questions

What is the best way to create a non-reactive value in Vue.js?

How to efficiently use .filter() in a React useState setter while looping through .forEach() - A step-by-step guide

Adjusting the viewpoint scale while zooming in and out

Unable to utilize the resolved value received from a promise and returned from it

Incorporating a PHP file containing both PHP and JavaScript variables into an AJAX document

Iterating through every variable on the webpage using JavaScript

Customizing the Steps Component in Ant Design

Which child node of the html tag represents the "text"?

The hidden textbox loses its value when submitting

Unable to execute controller due to service call testing failure

Set the value of a variable to the result of a JavaScript function

Verify and include phone number entry using Jquery

Refreshing ng-repeat when there are modifications to scope variables that are unrelated to the data being displayed

Understanding the distinctions among variables in typescript

Guide on leveraging a private GitHub repository as a yarn dependency without installing internal dependencies

Encountering a Nuxt App Output Error while Attempting to Create

Alter Elements in AngularJS Based on Their Relationship to Other Elements

Troubleshooting: Inability to use the v-html attribute in VueJS

Error occurred while importing Three.js library: "ERR_ABORTED 404 (Not Found)"

A new WordPress plugin that includes a custom designed stylesheet featuring a hidden display property within a specific