How To Get Data Of Dynamically Nested Select Using Foreach Values In Vue

I am dynamically populating the data and trying to display it. I am getting the option id's of the Select elements, but I am not sure how do I get the parent element. I tried to ad

Solution 1:

I created a snippet that is a bit more logical to me:

• it structures selected values dynamically by the variationName (so works for any number of variations)

• gives the ability to pass the whole selected variant_options object to the select:

<option
  v-for="(option, idxj) in item.variant_options"
  :key="`options-${ idxi }-${ idxj }`"
  :value="option.variationOptionName"
  <!-- if you set it to :value="option",
  then the whole object is passed -->
>
  {{ option.variationOptionName }}
</option>

new Vue({
  el: "#app",
  computed: {
    variationOptionsArray() {
      return Object.values(this.variationOptions)
    }
  },
  data() {
    return {
      variations: [{
          "id": 1,
          "variationName": "Material",
          "created_at": "2020-08-20T16:23:18.000000Z",
          "updated_at": "2020-08-20T16:23:18.000000Z",
          "variant_options": [{
              "id": 1,
              "variants_id": 1,
              "variationOptionName": "Plastic",
              "created_at": "2020-08-20T16:45:15.000000Z",
              "updated_at": "2020-08-20T16:45:15.000000Z"
            },
            {
              "id": 2,
              "variants_id": 1,
              "variationOptionName": "Wood",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
            {
              "id": 3,
              "variants_id": 1,
              "variationOptionName": "glass",
              "created_at": "2020-08-20T16:46:23.000000Z",
              "updated_at": "2020-08-20T16:46:23.000000Z"
            },
            {
              "id": 4,
              "variants_id": 1,
              "variationOptionName": "pvc",
              "created_at": "2020-08-20T16:47:15.000000Z",
              "updated_at": "2020-08-20T16:47:15.000000Z"
            },
            {
              "id": 5,
              "variants_id": 1,
              "variationOptionName": "unknown",
              "created_at": "2020-08-20T16:47:58.000000Z",
              "updated_at": "2020-08-20T16:47:58.000000Z"
            }
          ]
        },
        {
          "id": 2,
          "variationName": "color",
          "created_at": "2020-08-20T16:25:14.000000Z",
          "updated_at": "2020-08-20T16:25:14.000000Z",
          "variant_options": [{
              "id": 1,
              "variants_id": 1,
              "variationOptionName": "Orange",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
            {
              "id": 2,
              "variants_id": 2,
              "variationOptionName": "Red",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
          ]
        },
        {
          "id": 3,
          "variationName": "type",
          "created_at": "2020-08-20T16:25:45.000000Z",
          "updated_at": "2020-08-20T16:25:45.000000Z",
          "variant_options": [{
            "id": 6,
            "variants_id": 3,
            "variationOptionName": "working",
            "created_at": "2020-08-20T16:48:44.000000Z",
            "updated_at": "2020-08-20T16:48:44.000000Z"
          }]
        }
      ],
      variationOptions: {},
    };
  },
  mounted: function() {
    for (let i = 0; i < this.variations.length; i++) {
      Vue.set(this.variationOptions, this.variations[i].variationName, [])
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    As Object: {{ variationOptions }}<br />
    As Array: {{ variationOptionsArray }}
    <table>
      <thead>
        <tr>
          <th>Variation Name</th>
          <th>Variation Values</th>
          <th>Selected</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, idxi) in variations" :key="`item-${ idxi }`">
          <td>
            {{ item.variationName }}
          </td>
          <td>
            <select multiple v-model="variationOptions[item.variationName]">
              <option v-for="(option, idxj) in item.variant_options" :key="`options-${ idxi }-${ idxj }`" :value="option.variationOptionName">
                {{ option.variationOptionName }}
              </option>
            </select>
          </td>
          <td>
            {{ variationOptions[item.variationName] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

The biggest difference is that I didn't store the selected values in an Array but in an Object - but I provided the values also in an computed Array format for more convenience.