make input (checkbox) disable when one of checkboxes is clicked in vue.js

user_15095637 0
Viewed 686

I've been working on this problem and I searched about this for an hour, but none of the answers led me to the correct answer.

I have three items(sorry I hard coded) which every single item contains one input(checkbox), and what I want to achieve is when one of the checkboxes is clicked, make others disable to click in vue.js.

<template>
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContents(c)" :id="c.id" :disabled="selectedContent.length > 0">
</template>

<script>
    export default {
        data: function () {
            selectedContent: [],
        }, 
        methods: {
            addContent: function(data) {
                if (this.selectedContent.length === 0){
                  this.selectedContent.push(data);
                }
            }
        }
    }
</script>

I read I need :disabled to make input disable, so I thought after I push one item to selectedContent, it'd disable my inputs, but it doesn't. I can still clickable other inputs even after I checked one of them. Can anyone point me out what I'm doing wrong?

vue.js checkbox input javascript
1 Answers

you missed spelled @click="addContent(c)"

new Vue({
  el: "#app",
  data: {
      selectedContent: [],
      c: {
        id: 1,
        content: 'something'
      }
  },
  methods: {
   addContent: function(data) {
      if (this.selectedContent.length === 0) {
        this.selectedContent.push(data);
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"><template>
    <input type="checkbox" @click="addContent(c)"  :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContent(c)"  :disabled="selectedContent.length > 0">
    <input type="checkbox" @click="addContent(c)" :disabled="selectedContent.length > 0">
</template>
</div>

user_93131090
Related