Fix: Vue (radiogroup and checkbox questions): enableIf in choices pro…

…perty doesn't work correctly #2807
surveyjs · Apr 20, 2021 · c5e90a7 · c5e90a7
1 parent eebd0c7
commit c5e90a7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/src/vue/checkboxitem.vue b/src/vue/checkboxitem.vue
@@ -12,7 +12,9 @@
         v-bind:aria-required="question.isRequired"
         :aria-label="item.locText.renderedHtml"
         :aria-invalid="question.errors.length > 0"
-        :aria-describedby="question.errors.length > 0 ? question.id + '_errors' : null"
+        :aria-describedby="
+          question.errors.length > 0 ? question.id + '_errors' : null
+        "
         :class="question.cssClasses.itemControl"
       />
       <input
@@ -26,7 +28,9 @@
         v-bind:aria-required="question.isRequired"
         :aria-label="item.locText.renderedHtml"
         :aria-invalid="question.errors.length > 0"
-        :aria-describedby="question.errors.length > 0 ? question.id + '_errors' : null"
+        :aria-describedby="
+          question.errors.length > 0 ? question.id + '_errors' : null
+        "
         :class="question.cssClasses.itemControl"
       />
       <span :class="question.cssClasses.materialDecorator">
@@ -44,23 +48,30 @@
       </span>
     </label>
     <survey-other-choice
-      v-show="question.hasOther && question.renderedValue && question.isOtherSelected"
+      v-show="
+        question.hasOther && question.renderedValue && question.isOtherSelected
+      "
       v-if="item.value == question.otherItem.value"
       :question="question"
     />
   </div>
 </template>
 
 <script lang="ts">
+import { ItemValue, Base } from "survey-core";
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
+import { BaseVue } from "./base";
 
 @Component
-export class CheckboxItem extends Vue {
+export class CheckboxItem extends BaseVue {
   @Prop() question: any;
-  @Prop() item: any;
+  @Prop() item: ItemValue;
   @Prop() index: any;
   @Prop() hideLabel: boolean;
+  protected getModel(): Base {
+    return this.item;
+  }
   get isAllSelected() {
     return this.question.isAllSelected;
   }
@@ -73,4 +84,4 @@ export class CheckboxItem extends Vue {
 }
 Vue.component("survey-checkbox-item", CheckboxItem);
 export default CheckboxItem;
-</script>
+</script>
diff --git a/src/vue/radiogroupitem.vue b/src/vue/radiogroupitem.vue
@@ -41,15 +41,20 @@
 </template>
 
 <script lang="ts">
+import { ItemValue, Base } from "survey-core";
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
+import { BaseVue } from "./base";
 
 @Component
-export class RadiogroupItem extends Vue {
+export class RadiogroupItem extends BaseVue {
   @Prop() question: any;
-  @Prop() item: any;
+  @Prop() item: ItemValue;
   @Prop() index: any;
   @Prop() hideLabel: boolean;
+  protected getModel(): Base {
+    return this.item;
+  }
   getLabelClass(item: any) {
     return this.question.getLabelClass(item);
   }