apply a conditional class to dropdownlist with vue

[Jason Henson]

I am attempting to do some basic validation with the dropdownlist component with Vue.js using conditional styling. The issue I am having is that once a class is added -- it is never removed even if the the value of "state" changes.

So, if I set "state" to false and then to true this is the classes I have on the element: "e-input-group e-control-wrapper e-ddl e-control e-keyboard e-error e-success".

<ejs-dropdownlist

:data-source="modules"

:fields="fields"

:css-class="test(state)"

/>

methods: {

test (state) {

if (state === null) { return '' }

return state ? 'e-success' : 'e-error'

},

[Karthikeyan Viswanathan]

Hi Jason Henson,   

  

Thanks for contacting Syncfusion Support.   

  

Based on your scenario, you can add the cssClass dynamically by using create or change event in DropDownList. Because cssClass has only accept thestring value not a function call. Please refer to the API reference link: https://ej2.syncfusion.com/vue/documentation/drop-down-list/api-dropDownListComponent.html#cssclass    

  

Please find the below code example:   

  

<code>   

<style>   

@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";   

</style>   

<template>   

    <div class="control_wrapper"  style="margin:50px auto 0; width:250px;">   

        <ejs-dropdownlist id='dropdownlist' :dataSource='sportsData' :created='test'></ejs-dropdownlist>   

    </div>   

</template>   

<script>   

import Vue from 'vue';   

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

Vue.use(DropDownListPlugin);   

  

export default Vue.extend({   

  data: function() {   

    return {   

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

      state: true   

          }   

        },   

      methods: {   

            test: function(e){   

              var ddlClasses = document.getElementById('dropdownlist').ej2_instances[0];   

             ddlClasses.cssClass = (this.state) ? 'e-success' : 'e-error';   

              }   

            }   

      });   

  

</script>   

  

</code>   

  

Sample link: http://www.syncfusion.com/downloads/support/forum/139080/ze/QUICKS~1302788773.zip    

  

Regards,   

Karthikeyan V. 

[Jason Henson]

So, I tried your approach, but I am still having the same issue where both 'e-error' and 'e-success' classes are  added to the element when state goes from false to true.

I inspect ddlClasses.cssClass and it only has one of the values, but when I look at the actual element it has classes: 'e-input-group e-control-wrapper e-ddl e-control e-keyboard e-error e-success'

[Karthikeyan Viswanathan]

Hi Jason Henson,    

 

Based on your scenario, You can add and modify the class by using DropDownlist’s parentElement. 

Please refer the below code example: 

<code> 

test: function(e){ 

              var ddlClasses = document.getElementById('dropdownlist').ej2_instances[0].element.parentElement.classList; 

              if(status){ 

                ddlClasses.remove('e-error'); 

                ddlClasses.add('e-success'); 

              } 

              else { 

                ddlClasses.add('e-error'); 

                ddlClasses.remove('e-success'); 

              } 

              } 

</code> 

Regards, 

Karthikeyan V. 

[Jason Henson]

Direct DOM manipulation like that is considered anti-pattern in frameworks like Vue, React, etc. It also circumvents Vue's reactivity system and is considered bad practice. I mean, whatever values I pass to the component during rendering should reset every time the component gets re-renders. The point in using frameworks like Vue is to allow them to handle how the DOM gets rendered so you don't have to do it manually. To me this seems like a bug in your Vue component.

[Karthikeyan Viswanathan]

Hi Jason Henson,

We have confirmed this as an issue with “CssClass is not removed when it is changed dynamically” and we have logged a defect report. The fix for this issue is estimated to be available on our 2018 volume 2 service pack 2 release.   

Regards,
Karthikeyan V.