fixes T1277897: fixed v-model binding in view 3 on checkbox (#29312)

Co-authored-by: sergey-kras <[email protected]>

Author: sergey-kras

apps/vue/components/check-box-example.vue

@@ -0,0 +1,41 @@
+<template>
+  <example-block title="v-model">
+    DX with value:
+    <br>
+    <dx-check-box v-model="dxCheckBoxValue" />
+    <br>
+    <div>checkBoxValue: {{ dxCheckBoxValue ? '🟢' : '🔴' }}</div>
+    <br>
+    -------------
+    <br>
+    Native checkbox with modelValue:
+    <br>
+    <input type="checkbox" v-model="checkBoxValue2" />
+    <br>
+    <div>checkBoxValue: {{ checkBoxValue2 ? '🟢' : '🔴' }}</div>
+    <br>
+  </example-block>
+</template>
+
+<script>
+import { ref, watch } from "vue";
+import ExampleBlock from "./example-block";
+import { DxCheckBox } from "devextreme-vue/check-box";
+
+const checkBoxValue2 = ref(false);
+
+watch(checkBoxValue2, (newValue) => console.log("checkBoxValue2 changed:", newValue));
+
+export default {
+  components: {
+    ExampleBlock,
+    DxCheckBox,
+  },
+  data() {
+    return {
+      dxCheckBoxValue: false,
+      checkBoxValue2,
+    };
+  },
+};
+</script>

apps/vue/components/examples.vue

@@ -28,6 +28,9 @@
   <text-box-example/>
   <br/>
   <validator-example/>
+  <br/>
+  <check-box-example/>
+  <br/>
 </template>
 
 <script>
@@ -46,7 +49,8 @@ import ScrollViewExample from "./scroll-view-example";
 import TabPanelExample from "./tab-panel-example";
 import TextBoxExample from "./text-box-example";
 import ValidatorExample from "./validation-example";
-  
+import CheckBoxExample from "./check-box-example";
+
 export default {
   components: {
     AccessingInstanceExample,
@@ -63,7 +67,8 @@ export default {
     ScrollViewExample,
     TabPanelExample,
     TextBoxExample,
-    ValidatorExample
+    ValidatorExample,
+    CheckBoxExample
   }
 };
 </script>

packages/devextreme-vue/src/core/__tests__/configuration.test.ts

@@ -1,4 +1,5 @@
 import { ComponentPublicInstance, reactive } from 'vue';
+import { VMODEL_NAME } from '../vue-helper';
 import Configuration, {
   bindOptionWatchers,
   ExpectedChild,
@@ -644,4 +645,35 @@ describe('onOptionChanged', () => {
 
     expect(emitStubRoot).toHaveBeenCalledTimes(0);
   });
+
+  it('should use v-model event name and mutate innerChanges with VMODEL_NAME when option is "value" and v-model is active', () => {
+    const innerChanges = {};
+    const config = new Configuration(jest.fn(), null, {});
+    const emitStub = jest.fn();
+    const component = {
+      $emit: emitStub,
+      $props: { value: false, [VMODEL_NAME]: false },
+      $options: {
+        props: { value: false, [VMODEL_NAME]: false },
+        model: true,
+      },
+      $: {
+        vnode: {
+          props: { value: false, [VMODEL_NAME]: false },
+        },
+      },
+    };
+    setEmitOptionChangedFunc(config, component as unknown as ComponentPublicInstance, innerChanges);
+
+    config.onOptionChanged({
+      fullName: 'value',
+      value: true,
+      previousValue: false,
+      component: null,
+    });
+
+    expect(emitStub).toHaveBeenCalledTimes(1);
+    expect(emitStub).toHaveBeenCalledWith(`update:${VMODEL_NAME}`, true);
+    expect(innerChanges[VMODEL_NAME]).toBe(true);
+  });
 });

packages/devextreme-vue/src/core/configuration.ts

@@ -306,12 +306,12 @@ function setEmitOptionChangedFunc(
   config.emitOptionChanged = (name: string, value: string) => {
     const props = vueInstance.$props;
     const vnode = vueInstance?.$?.vnode;
-    if (hasProp(vueInstance, name) && !isEqual(value, props[name]) && vueInstance.$emit) {
-      innerChanges[name] = toRaw(value);
-      const eventName = name === 'value' && hasVModelValue(vueInstance.$options, props, vnode)
-        ? `update:${VMODEL_NAME}`
-        : `update:${name}`;
 
+    const propsName = name === 'value' && hasVModelValue(vueInstance.$options, props, vnode) ? VMODEL_NAME : name;
+    const eventName = `update:${propsName}`;
+
+    if (hasProp(vueInstance, name) && !isEqual(value, props[propsName]) && vueInstance.$emit) {
+      innerChanges[propsName] = toRaw(value);
       vueInstance.$emit(eventName, value);
     }
   };