Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to hide only one element in Vue webform

I’m new to Vue and attempting to hide one element in a webform on load that is in a loop. I’m attempting to use v-if with a showHideEditComponent method call. When I call the showHideEditComponent method and set the uniqueName to "DescribeIssue" and return false it hides all the elements on the form. If I set it to true it will only show the DescribeIsusse element. How do I only hide DescribeIssue and keep all of the other elements entact without having if, if else, return true, return false…. in the showHideEditComponent method?

 <div v-for="field in Datas" :key="field.key" class="form-row">
          
            <component :is="getComponentName(field)" :Datas="field"
              :id="'input-ninci-data-' + field.id" v-model="
                    testSelectedRowForEdit.attributeValues[field.uniqueName]
                  " :changeLogInfo="
                    testSelectedRowForEdit.changeLogInfos[field.uniqueName]
                 " :useVueMultiSelect="field.listAllowMultiple" 
                 
                  //adding v-if here

                 v-if="showHideEditComponent(field.uniqueName)"
               @blur="onWebFormFieldUpdate">
            </component>
          
        </div>
        
        
showHideEditComponent(uniqueName) {

    if (uniqueName === 'DescribeIssue') {

      return false;     //hides all elements 
      //return true;    // only shows DescribeIssue element
    }

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You can add condition for DescribeIssue so when get DescribeIssue field so return false and not show DescribeIssue filed and for other fields you can pass true in else condition.

showHideEditComponent(uniqueName) {
    if (uniqueName === 'DescribeIssue') {
        return false;
    } else {
        return true;
    }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading