1. Home
  2. Forum
  3. Vue
  4. got error console - checkbox everytime click checkbox -

got error console - checkbox everytime click checkbox -

this is my checkboxcomponent
<template>
    <div>
        <ejs-checkbox
                      :floatLabelType='floatLabelType'
                      :label='label'
                      :checked='value'
                      :name='name'
                      :disabled='readonly'
                      :change='onChange'
        ></ejs-checkbox>
    </div>
</template>

<script>
import Vue from "vue";
import {
  ButtonPlugin,
  CheckBoxPlugin,
} from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Vue.use(CheckBoxPlugin);

export default {
   name:"EvoCheck",
   props:{
        name:{
            type:String,
            default:'',
        },
        label:{
            type:String,
            default:'Check'
        },
        value:{
            type:Boolean,
            default:false
        },
        readonly:{
            type: Boolean,
            default:false
        },        
   },
   data(){
    return {
      floatLabelType:"Auto",
    } 
   },
   methods:{
    onChange:function(args){
      this.$emit('change', args);
    }
   }
};
</script>


this is snippet code implementation
<template>
                    <EvoCheck
                      label="Credit Card?"
                      :value="obj.IsCC"
                      @change="isCreditCard"
                    ></EvoCheck>

                    <EvoTextField :show="obj.IsCC == undefined ? false : obj.IsCC"
                        placeholder="Nomor Kartu Kredit"
                        :value="obj.CCNumber"
                        type="number"
                        :required="true"
                    ></EvoTextField>
</template>
<script>
import Vue from "vue";
import EvoCheck from '@/components/Common/CheckBoxComponent.vue';
export default Vue.extend({
components:{
EvoCheck
},
methods: {
isCreditCard:function(args){
      
      this.obj.IsCC=args.checked
      this.$forceUpdate();
    }
},
});


error occurs everytime clicking checkbox,but the checkbox function is running well

content.js:27 Uncaught TypeError: Cannot read property 'getSelection' of null at F.f.jb (content.js:27) f.jb @ content.js:27 content.js:28 Uncaught TypeError: Cannot read property 'getSelection' of null at F.f.lb (content.js:28)



did i missed something?




3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team June 15, 2021 03:49 AM UTC

Hi Ivan, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We cannot reproduce your reported issue in our end. For your reference we have prepared code snippet and sample. 
 
 
<template> 
  <EvoCheck 
    :label="user.label" 
    :floatLabelType="user.floatLabelType" 
    :value="user.value" 
    :name="user.name" 
    :readonly="user.readonly" 
    @change="isCreditCard" 
  ></EvoCheck> 
</template> 
 
<script> 
import Vue from "vue"; 
import EvoCheck from "@/CheckBox.vue"; 
 
export default Vue.extend({ 
  components: { 
    EvoCheck, 
  }, 
  data() { 
    return { 
      user: { 
        label: "Credit Card?", 
        name: " ", 
        readonly: false, 
        floatLabelType: " ", 
        value: true, 
      }, 
    }; 
  }, 
  methods: { 
    isCreditCard: function (args) { 
      alert("State Changed"); 
    }, 
  }, 
}); 
</script> 
 
 
 
If we missed any of your issue, please share the below details. 
 
·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 
·        Please share us the video demonstration of this issue. 
·        Please share us the Syncfusion Package Version. 
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Aravinthan S 


IH Ivan Halim June 16, 2021 05:39 AM UTC

same issue occurred using same sample



{
  "name": "los-vue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@syncfusion/ej2-vue-base": "^19.1.54",
    "@syncfusion/ej2-vue-buttons": "^19.1.54",
    "@syncfusion/ej2-vue-calendars": "^19.1.63",
    "@syncfusion/ej2-vue-documenteditor": "^19.1.63",
    "@syncfusion/ej2-vue-dropdowns": "^19.1.63",
    "@syncfusion/ej2-vue-filemanager": "^19.1.58",
    "@syncfusion/ej2-vue-grids": "^19.1.59",
    "@syncfusion/ej2-vue-inputs": "^19.1.63",
    "@syncfusion/ej2-vue-layouts": "^19.1.58",
    "@syncfusion/ej2-vue-lists": "^19.1.56",
    "@syncfusion/ej2-vue-navigations": "^19.1.58",
    "@syncfusion/ej2-vue-pdfviewer": "^19.1.63",
    "@syncfusion/ej2-vue-popups": "^19.1.59",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4",
    "vue-cryptojs": "^2.1.5",
    "vue-router": "^3.2.0",
    "vue-sweetalert2": "^4.3.1",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.11"
  }
}

this is package.json



AS Aravinthan Seetharaman Syncfusion Team June 17, 2021 01:40 PM UTC

 
We have checked your query with mentioned component package version. We cannot reproduce your reported issue in our end. Please refer the below video demo.  
 
 
package.json 
 
"dependencies": { 
    "vue": "^2.6.11", 
    "@syncfusion/ej2-vue-base": "^19.1.54", 
    "@syncfusion/ej2-vue-buttons": "^19.1.54", 
    "@syncfusion/ej2-vue-calendars": "^19.1.63", 
    "@syncfusion/ej2-vue-documenteditor": "^19.1.63", 
    "@syncfusion/ej2-vue-dropdowns": "^19.1.63", 
    "@syncfusion/ej2-vue-filemanager": "^19.1.58", 
    "@syncfusion/ej2-vue-grids": "^19.1.59", 
    "@syncfusion/ej2-vue-inputs": "^19.1.63", 
    "@syncfusion/ej2-vue-layouts": "^19.1.58", 
    "@syncfusion/ej2-vue-lists": "^19.1.56", 
    "@syncfusion/ej2-vue-navigations": "^19.1.58", 
    "@syncfusion/ej2-vue-pdfviewer": "^19.1.63", 
    "@syncfusion/ej2-vue-popups": "^19.1.59" 
  }, 
 
 
App.vue 
 
<template> 
  <EvoCheck 
    :label="user.label" 
    :floatLabelType="user.floatLabelType" 
    :value="user.value" 
    :name="user.name" 
    :readonly="user.readonly" 
    @change="isCreditCard" 
  ></EvoCheck> 
</template> 
 
<script> 
import Vue from "vue"; 
import EvoCheck from "./CheckBox.vue"; 
 
export default Vue.extend({ 
  components: { 
    EvoCheck, 
  }, 
  data() { 
    return { 
      user: { 
        label: "Credit Card?", 
        name: " ", 
        readonly: false, 
        floatLabelType: " ", 
        value: true, 
      }, 
    }; 
  }, 
  methods: { 
    isCreditCard: function (args) { 
      alert("State Changed"); 
    }, 
  }, 
}); 
</script> 
 
 
For your convenience, we have prepared the sample based on our above suggestion. Please find the link below. 
 
 
If you are still facing the issue, 
 
·        Please try to reproduce the reported issue in provided sample or share the issue reproducible sample. 
·        Please share us the video demonstration of this issue. 
 
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Aravinthan S

Marked as answer
Loader.
Up arrow icon