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 :
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;
}
}