Как добавить свойство ко ВСЕМ объектам в массиве (данных), используя Vue. js? - PullRequest
Новая
       51

Как добавить свойство ко ВСЕМ объектам в массиве (данных), используя Vue. js?

0 голосов
/ 26 мая 2020

Фон : у меня есть массив в data (), который заполняется объектами из серверной части. Если запрос GET извлекает 6 объектов, эти 6 объектов будут обновлены в массиве.

Проблема : Я уже понимаю, что vm. $ Set необходим для добавления свойств к объекту. Но как добавить свойства ко всем объектам в массиве?

Я хочу изменить: 

 data() {
    return {
      expenseButton: [{key:value},{key:value},{key:value}]
         };
  }

на 

data() {
    return {
      expenseButton: [{key:value, key2:value2},{key:value, key2:value2},{key:value, key2:value2}]
         };
  }

Неудачная попытка который регистрирует newValue как свойство в массиве вместо каждого объекта 

  methods: {
    check() {
      this.$set(this.expenseButton, "newValue", this.expenseButton.newValue);
      console.log(this.expenseButton);
    }
  },

UPDATE Как настроить таргетинг на все объекты в массиве через vm. $ set, чтобы все объекты имели новое свойство называется "newValue" 

 data() {
    return {
      expenseButton: [{key1:value1},{key2:value2},{key3:value3}]
         };
  }

TO 

 data() {
    return {
      expenseButton: [{key1:value1,newValue: ''},{key2:value2, newValue: ''},{key3:value3, newValue: ''}]
         };
  }

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Вы можете использовать $set в массивах, передав индекс, по которому вы sh устанавливаете новое значение.

Однако, поскольку вы добавляете новое свойство к каждому элементу в массиве , вы можете просто сопоставить элементы массива, добавить свойство и полностью заменить элемент данных, что будет намного эффективнее. 

check() {
  this.expenseButton = this.expenseButton.map((obj) => {
    obj.newValue = ''
    return obj
  })
}

Чтобы сохранить реактивность, вам нужно будет вызывать $set для каждого индекса с соответствующей парой "ключ-значение". См. Для справки ответ @ blex . 

check() {
  this.expenseButton.forEach((_, index) => {
    this.$set(this.expenseButton[index], 'newValue', '')
  })
}

Если приведенное выше решение решает ваш вопрос, примите ответ @ blex в качестве принятого решения.

1 голос
/ 26 мая 2020

Вы можете использовать this.$set в al oop: 

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      expenseButton: [{ key: 0 }, { key: 1 }, { key: 2 }]
    };
  },
  methods: {
    check() {
      this.expenseButton.forEach((o, i) => {
        this.$set(this.expenseButton[i], "key2", i * 2);
      });
    }
  }
});

var vm = new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div>
    <ul>
      <li v-for="x in expenseButton" :key="x.key">
       {{x}}
      </li>
    </ul>
    <button @click="check">Update items</button>
  </div>
</template>
...