Using Vue.Js to link a value to a checkbox within a component

Question

Using Vue.Js to link a value to a checkbox within a component

I'm currently developing a custom component that wraps around a checkbox (similar to what I've done with text and number input types), but I'm facing an issue with binding the passed-in value correctly.

Here's the structure of my component:

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
  name: 'check-edit',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    errors: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
  },
  computed: {
    listeners () {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit('input', event.target.value)
      }
    },
    hasErrors () {
      return this.errors.length > 0
    }
  },
}
</script>

I have globally imported this component and used it in another view like this:

<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>

The data model contains the property ShowInCalendar, which is a boolean. In my test case, it is set to true. When I view the page, the checkbox is checked as expected. However, when I interact with the checkbox, the value changes to 'on' and subsequent changes do not reflect on the ShowInCalendar model property.

I came across this example here and attempted to implement a local data property, but it didn't resolve the issue.

In essence, I aim to initialize the checkbox based on the ShowInCalendar property bound via v-model and update the property accordingly when the checkbox state changes. Any advice or suggestions would be greatly appreciated.

Thank you.

javascript vue.js checkbox components v-model

Answer 1

Answer №1

Avoid using $emit event.target.value as it will only return the value of the checkbox, not a Boolean value. To accurately determine if the checkbox has been updated to true or false, use $emit event.target.checked as suggested by fstep.

Answer 2

Avoid using $emit event.target.value as it will only return the value of the checkbox, not a Boolean value. To accurately determine if the checkbox has been updated to true or false, use $emit event.target.checked as suggested by fstep.

Answer 3

Answer №2

If you find that v-on is the sole listener being used, it may be more convenient to utilize v-model as demonstrated in the checkbox example provided in the Vue input documentation.

Nevertheless, alternative listeners can be implemented based on the guidelines outlined in the Binding Native Events to Components documentation.

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
    name: 'check-edit',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        label: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        errors: {
            type: Array,
            default: () => []
        }
    },
    mounted() {},
    computed: {
        listeners() {
            var vm = this;
            // `Object.assign` merges objects together to form a new object
            return Object.assign(
                {},
                // We add all the listeners from the parent
                this.$listeners,
                // Then we can add custom listeners or override the
                // behavior of some listeners.
                {
                    // This ensures that the component works with v-model
                    input: function(event) {
                        vm.$emit('input', event.target.checked);
                    }
                }
            );
        },
        hasErrors() {
            return this.errors.length > 0;
        }
    }
};
</script>

Answer 4

If you find that v-on is the sole listener being used, it may be more convenient to utilize v-model as demonstrated in the checkbox example provided in the Vue input documentation.

Nevertheless, alternative listeners can be implemented based on the guidelines outlined in the Binding Native Events to Components documentation.

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
    name: 'check-edit',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        label: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        errors: {
            type: Array,
            default: () => []
        }
    },
    mounted() {},
    computed: {
        listeners() {
            var vm = this;
            // `Object.assign` merges objects together to form a new object
            return Object.assign(
                {},
                // We add all the listeners from the parent
                this.$listeners,
                // Then we can add custom listeners or override the
                // behavior of some listeners.
                {
                    // This ensures that the component works with v-model
                    input: function(event) {
                        vm.$emit('input', event.target.checked);
                    }
                }
            );
        },
        hasErrors() {
            return this.errors.length > 0;
        }
    }
};
</script>

Answer 5

Answer №3

Avoid modifying props directly. Instead, your component that utilizes a v-model should trigger input events when changes occur. The parent component will be responsible for updating the value accordingly.

Answer 6

Avoid modifying props directly. Instead, your component that utilizes a v-model should trigger input events when changes occur. The parent component will be responsible for updating the value accordingly.

Answer 7

Answer №4

Sends information from a checkbox input to its parent.

(Implemented in Vue3 using Script setup and Typescript)

Parent component utilized

<script setup lang="ts">

import { ref } from 'vue'
import Triline from './Triline.vue'

const isChecked = ref(false)

</script>

<template>
    <div style="color: aliceblue;">
       <Triline @on-checked="isChecked=$event"/>
       {{isChecked}}
    </div>
</template>

Method 1:

const checkedo:: is not necessary.

Using @input instead of @change and .value instead of .checked is the correct approach for handling checkbox inputs (referencing the first paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref} from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        :value="checkedo"
        @change="$emit('onChecked',checkedo =($event.target as HTMLInputElement).checked)"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Method 2 (using watch):

const checkedo is necessary for the watch feature.

Using @input over @change and .value over .checked follows the recommended practices for handling checkbox inputs (referencing the first paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref, watch } from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

watch(checkedo, () => {
      emit("onChecked", checkedo.value);
})

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        :value="checkedo"
        @change="event => checkedo=(event.target as HTMLInputElement).checked"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Method 3:

const checkedo is required for the watch functionality.

Utilizing @input instead of @change and .value instead of .checked aligns with best practices for managing checkbox inputs (referring to the initial paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref, watch} from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

watch(checkedo, () => {
      emit("onChecked", checkedo.value);
})

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        v-model="checkedo"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Answer 8

Sends information from a checkbox input to its parent.

(Implemented in Vue3 using Script setup and Typescript)

Parent component utilized

<script setup lang="ts">

import { ref } from 'vue'
import Triline from './Triline.vue'

const isChecked = ref(false)

</script>

<template>
    <div style="color: aliceblue;">
       <Triline @on-checked="isChecked=$event"/>
       {{isChecked}}
    </div>
</template>

Method 1:

const checkedo:: is not necessary.

Using @input instead of @change and .value instead of .checked is the correct approach for handling checkbox inputs (referencing the first paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref} from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        :value="checkedo"
        @change="$emit('onChecked',checkedo =($event.target as HTMLInputElement).checked)"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Method 2 (using watch):

const checkedo is necessary for the watch feature.

Using @input over @change and .value over .checked follows the recommended practices for handling checkbox inputs (referencing the first paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref, watch } from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

watch(checkedo, () => {
      emit("onChecked", checkedo.value);
})

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        :value="checkedo"
        @change="event => checkedo=(event.target as HTMLInputElement).checked"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Method 3:

const checkedo is required for the watch functionality.

Utilizing @input instead of @change and .value instead of .checked aligns with best practices for managing checkbox inputs (referring to the initial paragraphs).

Triline.vue component

<script setup lang="ts">

import { ref, watch} from 'vue'

const checkedo= ref(false);

const emit = defineEmits<{
(e:"onChecked",v:boolean):void}>()

watch(checkedo, () => {
      emit("onChecked", checkedo.value);
})

</script>

<template>
    <div class="triline">
  
        <input type="checkbox" id="checkbox"
        v-model="checkedo"
        >
        <label for="checkbox">{{ checkedo }}</label>
    </div>
</template>

Using Vue.Js to link a value to a checkbox within a component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for creating visually appealing text on a web browser with the help of open-source libraries

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Why is the parameter value becoming null during an Ajax call?

How can you initiate the wizard sequence again in TelegrafJS?

retrieving embedded content from an iframe on Internet Explorer version 7

A numerical input field that removes non-numeric characters without removing existing numbers?

JQuery plugin for creating interactive date selection forms

Ways to pinpoint a particular division and switch its class on and off?

Observables do not provide any results when used in a pipe with an image src

Wrapping a group of elements with opening and closing tags using jQuery

Guidelines for incorporating JS in Framework7

Not every child within a transition group in Vue.js is currently engaged in animation

VueDraggable communicates with the database by sending a request during drag and drop interactions

In what ways can I leverage the functionalities of an AngularJS directive to delay the display of content until a user clicks on it?

Using jQuery idle timeout to abort jQuery AJAX calls in Laravel 5.2

NextJS rewrites work seamlessly in a live environment

Seems like the ng-show events inside are not being triggered, almost like an invisible image

position blocks next to each other within a container

The local server for handling HTTP requests has ceased to operate

Unexpected Issues with Page Refresh in AngularJS