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 objectis passed -->
>
  {{ option.variationOptionName }}
</option>

newVue({
  el: "#app",
  computed: {
    variationOptionsArray() {
      returnObject.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, [])
    }
  }
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="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><trv-for="(item, idxi) in variations":key="`item-${ idxi }`"><td>
            {{ item.variationName }}
          </td><td><selectmultiplev-model="variationOptions[item.variationName]"><optionv-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.