Constructing array within vue method

Question

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";

      console.log(event.target.value);
      console.log(id);

      var new_array = new Array(); //create an empty array
      new_array.push(item);
      new_array.push(event.target.value);
      new_array.push(id);
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></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>
  </select>
</li>
</div>

Can you explain more about the output? What's the relation between the id which seems to be the first cat_id, the item, and new_date — Majed Badawi
– Majed Badawi, Commented Nov 24, 2021 at 21:08
@MajedBadawi Sorry, yes: I'm hoping to get it so that the cat_id would be the main key, and then the object attached to that ID would be the item and new_date. So the item and new date would have named indeces but would be a level below, attached to cat_id as the key — Geoff_S
– Geoff_S, Commented Nov 24, 2021 at 21:10

Majed Badawi · Accepted Answer · 2021-11-24 21:18:25Z

2

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: event.target.value } ];
  console.log(obj);
}

Shorter version:

testChange(event, id){
  const obj = {
    [id[0]]: [ { item:  "B-24", new_data: event.target.value } ]
  };
  console.log(obj);
}

edited Nov 24, 2021 at 21:18

answered Nov 24, 2021 at 21:16

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

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

5 Comments

Geoff_S Over a year ago

I could also do this by initializing obj in data as well, right? so it could be a shared object, that I could manipulate here?

Majed Badawi Over a year ago

@Geoff_S yes you can initialize it in data as obj: {}, and then access/mutate it using this.obj

Geoff_S Over a year ago

Thanks, I think I have it except for one thing: id[0] and even ``` const[firstId]``` seem to only return the first number of my cat_id which is "1", but I can't seem to get the full id of 123 as the key of the object?

Majed Badawi Over a year ago

The above example shows that id is printing an array [ 123 ] inside the function

Geoff_S Over a year ago

Oh, I see now! If I were to do the same thing with a string value being passed it has a different format. I just got that working as well, thanks!

Collectives™ on Stack Overflow

Constructing array within vue method

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related