I am a beginner with Vue and I am facing a challenge in hiding a specific element within a web form that is part of a loop. I am trying to use v-if along with a showHideEditComponent method call. However, when I invoke the showHideEditComponent method with a uniqueName set to "DescribeIssue" and return false, it hides all elements on the form. Setting it to true only displays the DescribeIssue element. How can I hide DescribeIssue while keeping all other elements intact without using multiple conditional statements?
<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
}