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

Question

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?

Answer 1

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>