title: Dynamic Vuetify Textbox or Select based on Array Values
body: <p>I'm working on a modal form which will display a number of <a href="https://vuetifyjs.com/en/components/selects/" rel="nofollow noreferrer">v-select</a> or <a href="https://vuetifyjs.com/en/components/text-fields/" rel="nofollow noreferrer">v-text-field</a>... however, the number and types of these elements are being pulled from a database which means the vuetify code to create the elements needs to be dynamic. To start, I have a json object which is returned from the database which describes each input element. If the input is a v-select, then the json property called <em>InputType</em> is set to 'Combobox'. If it's a v-text-field then the <em>InputType</em> is set to 'Textbox'. Here's a sample.</p>
  <pre><code>{
    tags: [
      {
        TagDefinitionId: '1',
        InputType: 'Combobox',
        Name: 'Tag1',
        TagValueOptions: [
          {
            Value: 'Option 1',
          },
          {
            Value: 'Option 2',
          },
          {
            Value: 'Option 3',
          },
        ],
      },
      {
        TagDefinitionId: '2',
        InputType: 'Textbox',
        Name: 'Project Name',
        TagValueOptions: [],
      },
    ],
  }
  </code></pre>
  <p>Then, I'm using vuex to map the state in my modal to value called <em>documentTags</em>.</p>
  <pre><code>&lt;script&gt;
  import { mapState } from 'vuex';
  
  export default {
    name: 'MyModal',
    computed: {
      ...mapState(['documentTags']),
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Now, up inside my vuetify template for my modal I know how to create separate columns for the number of elements in my <em>documentTags</em> array. I can do something like this:</p>
  <pre><code>&lt;template&gt;
    &lt;v-dialog v-model=&quot;show&quot; max-width=&quot;600px&quot;&gt;
      &lt;v-row&gt;
        &lt;v-col
          v-for=&quot;n in this.documentTags.tags.length&quot;
          :key=&quot;n&quot;
          cols=&quot;18&quot;
          sm=&quot;8&quot;
          md=&quot;6&quot;
        &gt;
          &lt;v-card class=&quot;pa-2&quot; outlined tile&gt;
            This v-card needs to be replaced with a v-select or v-text-field
          &lt;/v-card&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-dialog&gt;
  &lt;/template&gt;
  </code></pre>
  <p>However, I really don't know how to walk through my <em>documentTags</em> array and determine which element (ie. v-select or v-text-field) needs to place in the appropriate column using the Vue and/or Vuetify syntax. Can anyone provide guidance on how this might be done?</p>
  <p><strong>Update</strong></p>
  <p>So, I updated my code according to Leonardo's suggestion (which works), but now I'm running into an issue. I don't know how to assign the tag Name to the label for each input object. I thought I could try something like <em>'tag.Name'</em> but that doesn't work. Any thoughts?</p>
  <pre><code>&lt;template&gt;
    &lt;v-dialog v-model=&quot;show&quot; max-width=&quot;600px&quot;&gt;
      &lt;v-row&gt;
        &lt;v-col
          v-for=&quot;tag in this.documentTags.tags&quot;
          :key=&quot;tag.TagDefinitionId&quot;
          cols=&quot;18&quot;
          sm=&quot;8&quot;
          md=&quot;6&quot;
        &gt;
          &lt;v-select
            v-if=&quot;tag.InputType === 'Combobox'&quot;
            :items=&quot;tag.TagValueOptions&quot;
            item-text=&quot;Value&quot;
            label=&quot;tag.Name&quot;
            required
          &gt;
          &lt;/v-select&gt;
          &lt;v-text-field
            v-else-if=&quot;tag.InputType === 'Textbox'&quot;
             label=&quot;tag.Name&quot;
             required
          &gt;
          &lt;/v-text-field&gt;
        &lt;/v-col&gt;
      &lt;/v-row&gt;
    &lt;/v-dialog&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>Update2</strong></p>
  <p>Does anyone know how to access the value from the v-select or v-text-field since these elements are being dynamically created? Normally, I would use something like <em>v-model=&quot;name&quot;</em> and then declare the <em>name</em> property inside the <em>data</em> prop section... However, I'm not exactly sure how to do those in this instance. Ideally, I'd like to package the inputs up into a JSON object with the tag name and it's value. So, something like this as an example (assuming we have two tags in this scenario).</p>
  <pre><code>&quot;userDocumentTags&quot;: [{
      &quot;Name&quot;: &quot;Project Name&quot;,
      &quot;Value&quot;: &quot;My Project Name&quot;
     },{
      &quot;Name&quot;: &quot;Project Number&quot;,
      &quot;Value&quot;: &quot;0001&quot;
    }
  ]
  </code></pre>
  <p>I thought I could bind the property by doing something like this:</p>
  <pre><code>&lt;v-select
    v-if=&quot;tag.InputType === 'Combobox'&quot;
    :v-model=&quot;tag.Name&quot;
    :items=&quot;tag.TagValueOptions&quot;
    item-text=&quot;Value&quot;
    label=&quot;tag.Name&quot;
    required
  &gt;&lt;/v-select&gt;
  </code></pre>
  <p>And inside my data props section I have something like this:</p>
  <pre><code>data: () =&gt; ({
    userDocumentTags: [],   
  }),
  </code></pre>
  <p>But, I don't know how to push the name and value pairs into the <em>userDocumentTags</em> object. Can anyone provide any guidance here?</p>