How to get data of dynamically nested Select using foreach values in Vue

Question

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 add hidden input but I cannot get value but I was not able to get the value(known issue)

new Vue({
  el: "#app",
 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":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++) {
      this.variationOptions.push({
        values: [],
      });
    }
  },
  methods: {},
})

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

<div id="app">
  <div>
    <table class="table">
      <thead>
        <tr>
          <td>Variation Name</td>
          <td>Variation Values</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(items,index) in variations">
          <td>{{items.variationName}}</td>
          <td>
            <select multiple class="form-control" id="exampleFormControlSelect2" v-model="variationOptions[index]['values']">
              <option v-for="(variationOptions,index) in  items.variant_options" :key="variationOptions.id" :value="variationOptions.id">{{variationOptions.variationOptionName}}</option>
            </select>
          </td>
          {{variationOptions}}
        </tr>
      </tbody>
    </table>
  </div>
</div>

Also I am getting the following error.

 *Error in render: "TypeError: Cannot read property 'values' of undefined"*

Where am I wrong. I would appreciate if you could take a moment to explain

Update:

I have updated the values with item.id and getting the data as I expect.

But the format is

 [ { "items": { "id": [] } }, { "items": { "id": [] } }, { "items": { "id": [] } } ]

How do I remove the items and id from the result.

Fiddle

It seems you should use variationOptions instead of variations in the template <tr v-for="(items,index) in variations"> — Sphinx
– Sphinx, Commented Aug 28, 2020 at 17:40

muka.gergely · Accepted Answer · 2020-08-28 19:53:38Z

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.

answered Aug 28, 2020 at 19:53

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mightyteja Over a year ago

Thanks a lot. Could you please brief me on idxi in the v-for.. It's new to me

muka.gergely Over a year ago

idxi is just an abbreviation for index or i. Usually I use idx (from the word index), but in this case there is another v-for inside that (and that is conventionally j - so idxj). It’s just a shorter word than index, but more expressive (to me) than a simple i.

mightyteja Over a year ago

Thanks for the explaining.. I have updated the values to put out id instead of name.. I am getting this error - select multiple v-model="variationOptions[item.id]"> expects an Array value for its binding, but got Undefined.. I am getting results as expected..

muka.gergely Over a year ago

Did you change the loop in the mounted() hook? The error says it’s missing the inital select array.

muka.gergely Over a year ago

@mightyteja for avoiding the warning: change the mounted to created - that is an earlier lifecycle hook, before rendering the template. The warning comes from the fact that the validationOptions object is set up AFTER the template has been mounted (so the values & variables in it are initiated). If you change to created, then you set up the function BEFORE the template is mounted, so the validationOptions object is ready to accept the multiple selects

|

Collectives™ on Stack Overflow

How to get data of dynamically nested Select using foreach values in Vue

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related