如何将来自对象的特定键的值存储到数组中 - Vue

Question

I have to say, I am new to the whole Vue framework. I have created a selectable table. The data selected from this table is stored in an object. This function should run in the back. So, I think I should run it the computed section. My object looks like this. I am trying to retrieve only the ids. This data is stored in the variable selected.

[ { "id": 5, "name": "CD", "box": "A5", "spot": 1 }, { "id": 2, ""name": "DVD", "box": "A2", "spot": 1 } ] 

I would like to only retrieve the values from the key id. These values should be stored in an array. The array should be pushed when the submit button is clicked. I will later use this array to store this information in this array into a database.

You can find my code below. I guess I am missing something because it doesn't seem to work. How should I refer to this function that it runs automatically and that the array can be called in my controller to put it into the database? Thanks for the help.

Template

<div class="row">
   <div class="col-2">
      <b-form-input v-model="date" class="form-control" type="date" value="getDate" ></b-form-input>
      <pre class="mt-3 mb-0">{{ date }}</pre>
   </div>
   <div class="col-6">
      <b-form-input v-model="description" placeholder="Enter some text"></b-form-input>
      <pre class="mt-3 mb-0">{{ description }}</pre>
   </div>
   <!-- Submit data to db -->
   <div class="col-4">
      <button class="btn btn-primary custom-button-width" center-block>Request antibody pool</button>
   </div>
</div>

JavaScript

data() {
  return {
    // data from db
    data: this.testerdata,
    // selected is the object where my selected data is stored.
    selected: [],
    // here should my id end up
    selectedids: {},
    description: '',
    date: '',
  }
},
computed: {
  tester() {
    var array = [];
    for (var test in this.selected) {
      if (test == "id") {
        array += this.selected[test];
      }
    }
    console.log(array);
  }
},
methods: {
  storeData: async function() {
    axios.post('/panel', {
      description: this.description,
      date: this.date,
      selectedids: this.tester(selectedids)
    }).then(function(response) {
      console.log(response);
    }).catch(function(error) {
      console.log(error);
    }).finally(function() {
      // always executed
    });
  },
}    

Answer 1

The problem is with this line:

array += this.selected[test];

This the way to add an item to an array:

array.push(this.selected[test]);

Additionally, you are trying to loop over properties of this.selected , but it is an array which contains objects and has no properties. Instead, you want to loop over each object item in the array and push the id property.

And, since this.selected is an array, not an object, you should not use a for...in loop-- which is for objects-- because the order will not be guaranteed. You can read more about that in the MDN for...in docs .

You could use a normal for loop or the array's forEach loop. I'll show the forEach :

this.selected.forEach(obj => {
    array.push(obj.id);
});

Answer 2

I understand that you might be looking for vanilla Javascript answer here. However a lot of code can be saved if you can use RamdaJS library to solve such issues.

It has an excellent set of functions like pluck , which will do the same thing in 1 line.

let array = R.pluck('id')(this.selected);