在 vue.js 中单击其中一个复选框时禁用输入（复选框）

Question

我一直在研究这个问题，我为此搜索了一个小时，但 none 个答案让我找到了正确答案。

我有三个项目（抱歉我硬编码），每个项目都包含一个输入（复选框），我想要实现的是当其中一个复选框被点击时，让其他人无法点击 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>

我读到我需要 :disabled 来禁用输入，所以我想在我将一个项目推送到 selectedContent 后，它会禁用我的输入，但事实并非如此。即使我检查了其中一个，我仍然可以点击其他输入。谁能指出我做错了什么？

Answer 1

你拼错了 @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>

在 vue.js 中单击其中一个复选框时禁用输入（复选框）

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

javascript

checkbox

input

vue.js