Is there any way to show hide fields ?

[dinesh-88]

Thanks for developing this library . Could you please help me on below questions ?

1. How can I show hide fields based on some conditions ?
2. How can I set values based on API response ?

Thanks

[alvarosabu]

Hi @dinesh-88 I guess you refer to the current version so I will answer based on that assumption.

1. You can do it through CSS by adding a class using customClass or customStyles properties when defining the field like this:

setup() {
  const isFieldVisible = ref(true);

  const form = computed( ()= >{
    id: 'test-form',
    fields: {
        name: TextField({
              label: 'Username',
              customClass: isFieldVisible.value ? 'show': 'hide' 
        }),
    }
  })

  return {
    form
  }
}

Also, you can achieve it with customStyles

TextField({
    label: 'Username',
    customStyles:  { visibility: isFieldVisible.value ? 'hidden': 'visible' }
}),

You made me realize of a bug #224 change detection was not working as expected with these two properties, should be fixed with this PR #225

[dinesh-88]

Hi @alvarosaburido

Thank for the reply. can you give me an example to set values from API response ?

Thanks again

[alvarosabu]

Hi sure, @dinesh-88, let's say you want to fill the options of a SelectField from and API call:

setup() {
  const isFieldVisible = ref(true);
  let consoleOptions = ref([]);
  
  const form = computed( ()= >{
    id: 'test-form',
    fields: {
        console: SelectField({
              label: 'Console (Async Options)',
              options: consoleOptions.value,' 
        }),
    }
  })

 onMounted(async () => {
      try {
        consoleOptions.value = await yourApiCall();
      } catch (e) {
        console.error(e);
      }
    });
    
  return {
    form
  }
}

It will be a similar approach, just make sure form is a computed property so options react to the consoleOptions change after you get data from your API Call.

You can check both demos here: https://vue-dynamic-forms.netlify.app/

1. Toggle Visibility
2. Async options are in the General Demo.

To see the code of the demos check here

[github-actions]

🎉 This issue has been resolved in version 3.13.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[dinesh-88]

Thanks a lot