How to override default value for properties in combobox?

[Ivan Halim]

<ejs-combobox

                    floatLabelType="Auto"

                    popupHeight="500px"

                    placeholder="Branch"

                    :allowCustom="false"

                    :allowFiltering="true"

                    :dataSource="obj.Branch"

                    v-model="f1.BranchId"

></ejs-combobox>

how to set override the default value for allowCustom,allowFiltering,popupHeight and floatLabelType ?

so the next <ejs-combobox> will have carry on properties , without mentioning {allowCustom,allowFiltering,popupHeight and floatLabelType}

[Berly Christopher]

Hi Ivan, 

  

Greetings from Syncfusion support. 

  

We can achieve the requested requirement by render the combo box as a custom component and define the required properties in the component itself and re-use the component without re-declare it in the application.  

  

Kindly refer the below code example. 

  

[Combobocomponent.vue] 

<template> 

  <div> 

    <combo></combo> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

import { Query } from "@syncfusion/ej2-data"; 

Vue.use(ComboBoxPlugin); 

Vue.component("combo", { 

  template: 

    "<div><ejs-combobox :allowCustom='allowCustom' :floatLabelType='floatLabelType' :popupHeight='popupHeight' :allowFiltering='allowFiltering' v-bind:placeholder='waterMark' v-bind:dataSource='data'></ejs-combobox></div>", 

  data() { 

    return { 

      allowCustom:true, 

      allowFiltering:true, 

      popupHeight:"250px", 

      floatLabelType:"Auto", 

      waterMark: "Choose value", 

      data:['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'], 

      labelType: "Auto", 

    }; 

  }, 

}); 

 

export default { 

  name: "SfComboBox", 

  props: { 

    msg: String, 

  }, 

}; 

</script> 

 

[App.vue] 

<template> 

  <div> 

       <SfComboBox /> 

        <SfComboBox /> 

        <SfComboBox /> 

        <SfComboBox />       

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import SfComboBox from "./components/Comboboxcomponent"; 

export default Vue.extend({ 

  components: { 

    SfComboBox, 

  }, 

  data: function () { 

    return {}; 

  }, 

}); 

</script> 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ComboBox_Custom_1657311138517215  

  

Regards, 

Berly B.C 

[Ivan Halim]

Thank you, how to passing value from App.vue to [Combobocomponent.vue] , i want to passing dataSource value and placeholder from App.vue sfcombobox .

[Berly Christopher]

Hi Ivan, 

  

We can pass the data from the parent to child component with help of props in the Vue platform. Kindly refer the below documentation to know more about this. 

  

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props  

  

For your convenience, we have prepared the sample and attached it below. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Parent_child_props-1210523184  

  

[ComboboxComponent.vue] 

<template> 

  <div> 

    <div><ejs-combobox :allowCustom='allowCustom' v-model='modelvalue' :floatLabelType='floatLabelType' :popupHeight='popupHeight' :allowFiltering='allowFiltering' :placeholder='message' v-bind:dataSource='datavalue'></ejs-combobox></div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { ComboBoxPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

Vue.use(ComboBoxPlugin); 

 

export default Vue.extend({ 

  name: "SfComboBox", 

  props: ['message','datavalue','modelvalue'], 

  data: function () { 

    return { 

      allowCustom:true, 

      allowFiltering:true, 

      popupHeight:"250px", 

      floatLabelType:"Auto", 

      labelType: "Auto", 

    }; 

  }, 

}); 

</script> 

[App.vue] 

<template> 

  <div> 

    <div class="control-section"> 

      <div 

        id="content" 

        style="margin: 0px auto; width: 300px; padding-top: 40px" 

      > 

        <SfComboBox :message="message" :modelvalue="modelvalue" :datavalue="datavalue"/> 

        <SfComboBox :message="message" :modelvalue="modelvalue" :datavalue="datavalue"/> 

        <SfComboBox :message="message" :modelvalue="modelvalue" :datavalue="datavalue"/> 

        <SfComboBox :message="message" :modelvalue="modelvalue" :datavalue="datavalue"/> 

      </div> 

    </div> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import SfComboBox from "./components/Comboboxcomponent"; 

export default Vue.extend({ 

  components: { 

    SfComboBox, 

  }, 

  data: function () { 

    return { 

       message: 'DATA FROM PARENT!', 

       modelvalue:"Badminton", 

       datavalue:['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'], 

    }; 

  }, 

}); 

</script> 

 

  

Regards, 

Berly B.C 

[Ardea Bagas]

Hallo Berly,

I have same question with the creator threads, and i follow your code in combobox, and i got this eror, i'm try using v-bind:value, but the value not change, any solution for that? 

sorry for my bad english, thank you.

[Berly Christopher]

Hi Ardea, 

  

We have checked the reported issue. If the data v-model in the parent is changed, the data in the child component will re-render. If a prop is mutated, Vue outputs a warning message because the mutated prop value will be overwritten whenever the parent component re-renders. If mutation is required, we suggest you to to create a data or computed property based on the prop's value as mentioned in the previous update.  

  

Kindly refer the below public Vue forums to get rid of the reported issue. 

https://forum.vuejs.org/t/nested-component-avoid-mutating-a-prop-directly/92748/2  

  

https://stackoverflow.com/questions/42614242/avoid-mutating-a-prop-directly-in-vuejs-2 

  

Regards, 

Berly B.C