Create a Vue JS component that enables the rendering of checkbox inputs and sends the selected values back to the

Question

Create a Vue JS component that enables the rendering of checkbox inputs and sends the selected values back to the

I am working on a Vue JS project where I am creating a custom component to display multiple checkboxes on the page. The challenge I am facing is sending back the value to the component in order to attach a v-model to it.

Currently, all my checkboxes allow me to select either true or false, but my goal is to send back only one true value. For example, if I choose 2 out of 4 checkboxes, the v-model on my component should have the value of true.

I have successfully rendered the checkboxes, however, I am struggling to make the v-model function as intended. Can someone point out what I might be doing wrong?

<GroupedCheckboxes :options="editor.sources" v-model="source.isChecked" />

Here is the code for my custom component:

<template>
  <div>
    <div v-for="(checkbox, index) in options" :key="index">
      <input type="checkbox">
    </div>
  </div>
</template>

<script>
export default {
  props: ['options']
}
</script>

The issue lies in my v-model not correctly retrieving the value from the group.

javascript vue.js nuxt.js

Answer 1

Answer №1

Challenge 1: The component GroupedCheckboxes lacks the implementation of v-model

In order for v-model to function on a component, it must:

Accept a value prop 1️⃣
Trigger an input event with a new value 2️⃣ To ensure that the value is set to true only when checkboxes are checked, utilize Array.prototype.some()

Challenge 2: The current implementation of GroupedCheckboxes does not support checkbox groups

Checkbox groups should:

Initially have a value of type Array 3️⃣
Have the same name attribute 4️⃣

<template>
  <div>
    <div v-for="(checkbox, index) in options" :key="index">
      <label>
        <input
          type="checkbox"
          name="myCheckboxGroup" 4️⃣
          :value="checkbox"
          v-model="myValue"
          @change="$emit('input', myValue.some(v => v))" 2️⃣
        >
        {{ checkbox }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'options',
    'value', 1️⃣
  ],
  data() {
    return {
      myValue: [], 3️⃣
    }
  },
}
</script>

live demo

Answer 2

Challenge 1: The component GroupedCheckboxes lacks the implementation of v-model

In order for v-model to function on a component, it must:

Accept a value prop 1️⃣
Trigger an input event with a new value 2️⃣ To ensure that the value is set to true only when checkboxes are checked, utilize Array.prototype.some()

Challenge 2: The current implementation of GroupedCheckboxes does not support checkbox groups

Checkbox groups should:

Initially have a value of type Array 3️⃣
Have the same name attribute 4️⃣

<template>
  <div>
    <div v-for="(checkbox, index) in options" :key="index">
      <label>
        <input
          type="checkbox"
          name="myCheckboxGroup" 4️⃣
          :value="checkbox"
          v-model="myValue"
          @change="$emit('input', myValue.some(v => v))" 2️⃣
        >
        {{ checkbox }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: [
    'options',
    'value', 1️⃣
  ],
  data() {
    return {
      myValue: [], 3️⃣
    }
  },
}
</script>

live demo

Create a Vue JS component that enables the rendering of checkbox inputs and sends the selected values back to the

Answer №1

Similar questions

Guide to configuring a robust schema and validation with joi

What could be causing an undefined error when running Javascript with Python and Selenium?

Automatically log users out of Django and update the backend after a period of inactivity without requiring any additional requests

Dynamic array of objects in Angular using ng-repeat

How to refresh an image in Next.js using setState even when the src path remains unchanged

What are the common practices for UI bindings in JavaScript and AJAX applications?

How can I take a screenshot from the client side and save it on the server side using PHP?

Placing an absolutely positioned element on top of other elements

Adjust the text color of a particular word as you type using the contenteditable property set to "true"

Browsing through a collection of JSON objects with a user interface

scrolling through a list using .slice choosing an excessive amount of items

development session not persisting on local server (localhost:4200)

What is the common approach for directing a setState Redux action?

Troubles with AJAX and jQuery

Navigating an array index within a v-for loop in Vue.js

Navigating through the properties of a JSON object and traversing the React state leads to encountering the error message 'state undefined'

How come my Ajax call is setting the 'Content-Type' to 'application/x-www-form-urlencoded' instead of 'JSON' as specified in the dataType parameter?

Unable to disable background color for droppable element

Communicating data transfer between two Node.js servers through the use of the Node Serial Port technology

The variables $invalid and $valid in my AngularJS form have not been assigned any values