Как сохранить значения из определенного ключа из объекта в массив - Vue - Javascript

Question

Я должен сказать, что я новичок во всей Vue Framework. Я создал выбираемую таблицу. Данные, выбранные из этой таблицы, хранятся в объекте. Эта функция должна запускаться сзади. Итак, я думаю, что я должен запустить это вычисленный раздел.

Мой объект выглядит так. Я пытаюсь получить только идентификаторы. Эти данные хранятся в выбранной переменной.

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

Я хотел бы получить значения только из идентификатора ключа. Эти значения должны храниться в массиве. Массив должен быть нажат при нажатии кнопки отправки. Позже я буду использовать этот массив для хранения этой информации в этом массиве в базе данных. Вы можете найти мой код ниже. Я думаю, что я что-то упустил, потому что это не похоже на работу. Как я должен ссылаться на эту функцию, чтобы она выполнялась автоматически и чтобы в моем контроллере можно было вызывать массив для помещения его в базу данных? Спасибо за помощь.

Вю

<code>             <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 }}

</ b-form-input> {{ description }}

<! - Отправить данные в БД ->

Запросить пул антител

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

Проблема с этой строкой:

array += this.selected[test];

Этот способ добавления элемента в массив:

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

Кроме того, вы пытаетесь зациклить свойства this.selected, но это массив, который содержит объекты и не имеет свойств.Вместо этого вы хотите зациклить каждый элемент объекта в массиве и push свойство id.

И, поскольку this.selected является массивом, а не объектом, вы не должны использовать for...in loop-- для объектов-- потому что порядок не будет гарантирован.Вы можете узнать больше об этом в MDN for...in документах .

. Вы можете использовать обычный цикл for или цикл forEach.Я покажу forEach:

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

Answer 2

Я понимаю, что вы, возможно, ищете здесь ванильный ответ на Javascript.Однако большой объем кода может быть сохранен, если вы можете использовать библиотеку RamdaJS для решения таких проблем.

Она имеет отличный набор функций, таких как pluck , который будет делатьто же самое в 1 строке.

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