How to use an element's attribute value to create props names

Hi there!
I’m inserting a component <text-input> which I call like this:

          <text-input
            field="ProjectName"
            :required="requiredFields.includes('ProjectName')"
            :validations="validations.ProjectName"
            :value="dataComponent.ProjectName"
            :valueOriginal="dataOriginal.ProjectName"
          />

As you can see, I set an initial value for the prop field="ProjectName" that I have to repeat for all other props.
I would like to avoid repeating the literal “ProjectName” and use the key field so that I have to to set it in one place.
I would think of something like these forms, none of which work:

:required="requiredFields.includes(this.getAttribute('field'))"
:validations="validations[field]"
:value="dataComponent[this.$attr.field]"

I have many and I cannot call them with a v-for

I’m taking baby steps to normalize as much as possible in order to create a dynamic form based on templates.
Any ideas?
Thanks! :slight_smile:

You can create a computed property for your fieldOptions returning an object with all needed properties and bind it to every <text-input> with v-bind like this <text-input v-bind='fieldOptions' />.

Thanks!
I finally used a method that returns the object I need
<text-input :content="field('ProjectName','projectDetails') v-on:updated="updateDataComponent"/>