Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Checkbox as a component in Vue3

I’m having a little trouble with using checkboxes as a separate component. I just have a simple child component that contains a template for a card with some data and also a checkbox, like a product list, each product card should have a checkbox and once selected the user should be able to delete it. Right now the way I’ve written the code, depending on how many items are in an array I’m looping through it and displaying cards, but if I check one checkbox, the second checkbox is also checked, even though I’m giving the input an individual id when rendered. Couldn’t find a proper solution anywhere so I’d appreciate any help! This is the child component : ProductCard.vue

<template>
    <div>
        <input :id="id" type="checkbox" :checked="modelValue" 
        @change="$emit('update:modelValue',$event.target.checked)">

    </div>
</template>

<script setup>
defineProps(['id','modelValue'])
</script>

and this is the parent component :

<template>
    <ProductCard v-for="item in array" :key="item.id" v-model="newsletter"/>
</template>

<script setup>
import ProductCard from '@/components/ProductCard.vue'
const array = [{},{}];
</script>

Thanks in advance!

Tags:

2

Answers


  1. 0

    Have you tried this?
    Haven’t used vue in a while so it could be wrong

    <template>
    <div>
        <input :id="id" type="checkbox" :checked="modelValue" 
            @change="(event)=>$emit('update:modelValue', event.target.checked)">
    </div>
</template>
    Login or Signup to reply.
  2. 0

    You can achieve this by passing a unique v-model prop to each ProductCard component.

    <template>
  <ProductCard v-for="item in array" :key="item.id" :id="item.id" v- 
  model="selectedItems[item.id]"/>
</template>

<script setup>
  import ProductCard from '@/components/ProductCard.vue'
  const array = [{ id: 1 }, { id: 2 }]; // Sample data with unique IDs
  const selectedItems = ref({}); // Object to store selected items
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search