Vue.jsのフレームワークであるVuetify.jsを使用して、下記のようなチェックボックスが並んだ画面を作成しました。
最初のチェックボックスである"CheckBoxA"にチェックが付くと、"CheckBoxB"の選択が可能となります。
"CheckBoxB"にチェックを入れると、"CheckBoxC"が選択可能となるような、
コードを作成したのですが、現状、"CheckBoxA"をクリックすると"CheckBoxC"までの全てのdisabledが外れて選択可能となってしまいます。
私が作成したコードは下記となります。
Vue
1<template> 2 <v-card> 3 <v-card-text> 4 <v-container> 5 <v-row> 6 <v-col cols="4"> 7 <v-checkbox 8 :label="`Checkbox A:${checkboxA}`" 9 v-model="checkboxA" 10 ></v-checkbox> 11 </v-col> 12 <v-col cols="4"> 13 <v-checkbox 14 :label="`Checkbox B:${checkboxB}`" 15 v-model="checkboxB" 16 :disabled="!checkboxA" 17 ></v-checkbox> 18 </v-col> 19 <v-col cols="4"> 20 <v-checkbox 21 :label="`Checkbox C:${checkboxC}`" 22 :disabled="!checkboxA && !checkboxB" 23 ></v-checkbox> 24 </v-col> 25 </v-row> 26 </v-container> 27 </v-card-text> 28 </v-card> 29</template> 30<script lang="ts"> 31import { Component, Vue } from 'nuxt-property-decorator' 32 33@Component({}) 34export default class extends Vue { 35 checkboxA: boolean = false 36 checkboxB: boolean = false 37 checkboxC: boolean = false 38} 39</script>
コード中のcheckboxCにあたる部分の:disabledにあたる部分のコードでうまくいくのではないかと思ったのですが、期待していた動作は
得られませんでした。
どなたかご教示いただけませんでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/02 22:19