title: Vue - how to pass array in this case?
body: <p>This is my sample code. I wanted to create a small form builder.</p>
  <p>I will have many select fields. How can I pass an array into a loop? My code doesn't work, but I hope you know what effect I want to get.</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for=&quot;(input, index) in formBuilder&quot; :key=&quot;index&quot;&gt;
              &lt;h1&gt;{{ input.name }}&lt;/h1&gt;
              &lt;div&gt;
                  Options:&lt;br /&gt;
                  {{ formBuilder.options }}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from &quot;vuex&quot;;
  
  export default {
      data() {
          return {
              formBuilder: [
                  {
                      name: &quot;Name&quot;,
                      options: this.versions,
                  },
                  {
                      name: &quot;Host&quot;,
                      options: this.countryList,
                  },
              ],
          };
      },
  
      computed: mapState([&quot;versions&quot;, &quot;countryList&quot;]),
  };
  &lt;/script&gt;
  </code></pre>
  <p><strong>EDIT</strong>.
  Below, I have added a version that works. But can it be done in a better way? And is this the correct way?</p>
  <p>It works:</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div v-for=&quot;(input, index) in formBuilder&quot; :key=&quot;index&quot;&gt;
              &lt;h1&gt;{{ input.name }}&lt;/h1&gt;
              &lt;div&gt;
                  Options:&lt;br /&gt;
                  {{ input.options }}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState } from &quot;vuex&quot;;
  
  export default {
      data() {
          return {
              formBuilder: [
                  {
                      name: &quot;Name&quot;,
                      options: [],
                  },
                  {
                      name: &quot;Host&quot;,
                      options: [],
                  },
              ],
          };
      },
  
      created() {
          this.formBuilder[0].options = this.versions;
          this.formBuilder[1].options = this.countryList;
      },
  
      computed: mapState([&quot;versions&quot;, &quot;countryList&quot;]),
  };
  &lt;/script&gt;
  </code></pre>