Skip to content

Constructing array within vue method

I’m currently sending multiple values through a selection change event in vue, and I’m logging the values within my method call to make sure they exist in the method( they do)

My issue is that I need to take the values within that method and create an array structured like this:

{ "123" : 
       { "item":"B-24", "new_date":"2022-11-30" },


My issue is that I can push the values into an array, but I can’t seem to figure out how to restructure the array to fit the format above.

Any suggestions on how to structure the array in the method are much appreciated

var vm = 
new Vue({
  el: "#app",
  props: { 

  data: {
    testing_dates:['2021-11-29', '2021-11-30'],
    cat_id: [123]
  methods: {
    testChange(event, id){
      item = "B-24";


      var new_array = new Array(); //create an empty array
<script src=""></script>
<div id="app">
<li>Category ID: {{ cat_id }}</li>
<li style="list-style: none;">
  <select style="width: auto;" @change="testChange($event, cat_id)">
     <option selected disabled>Options</option>
     <option v-for="date in testing_dates" :value="date">{{ date }}</option>


You can get the first id using restructuring or as id[0].

Then create an empty object and add a new pair to it where the key is the first id and the value is an array with one object having the item and the new_date

testChange(event, id){
  const item = "B-24";
  const [firstId] = id; // get first id
  const obj = {};
  obj[firstId] = [ { item, new_data: } ];

Shorter version:

testChange(event, id){
  const obj = {
    [id[0]]: [ { item:  "B-24", new_data: } ]