Vue.js：将 Promise 结果添加到数组答案

【问题标题】：Vue.js: Add Promise result to ArrayVue.js：将 Promise 结果添加到数组
【发布时间】：2018-06-28 16:37:55
【问题描述】：

我有以下 Vue.js 组件：

<template>
  <div>
    <pre>{{ $data }}</pre>
  </div>
</template>

<script>
  import { getPrice, getPriceForTimestamp } from '../api/crypto';
  import { cryptostorage } from '../api/utils';

  export default {
    name: 'test',
    data () {
      return {
        cryptoLocalStorage: cryptostorage.fetch()
      }
    },
    methods: {
      getPriceForAmount() {
        for (let i = 0; i < this.cryptoLocalStorage.length; i++) {
          let cryptoName = this.cryptoLocalStorage[i].title;
          let cryptoDate = this.cryptoLocalStorage[i].date;
          let cryptoAmount = this.cryptoLocalStorage[i].amount;

          let historicPrice = getPriceForTimestamp(cryptoName, cryptoDate);
          Promise.all([historicPrice]).then((values) => {
            this.cryptoLocalStorage[i].purchaseDatePrice = values[0];
            this.cryptoLocalStorage.push({ purchaseDatePrice: values});
          }).catch(e => console.error(e));
        }
      }
    },
    created() {
        this.getPriceForAmount();
    }
  }
</script>

这是$data 回复我的：

{
  "cryptoLocalStorage": [
    {
      "id": 0,
      "title": "ETH",
      "amount": "0.5",
      "date": "2018-01-16T12:39:00.000Z",
      "purchaseDatePrice": 1050.26
    },
    {
      "id": 1,
      "title": "BTC",
      "amount": "1",
      "date": "2018-01-09T12:42:00.000Z",
      "purchaseDatePrice": 14468.5
    },
    {
      "id": 2,
      "title": "LTC",
      "amount": "0.003",
      "date": "2017-11-14T12:48:00.000Z",
      "purchaseDatePrice": 62.13
    },
    {
      "purchaseDatePrice": [
        14468.5
      ]
    },
    {
      "purchaseDatePrice": [
        1050.26
      ]
    },
    {
      "purchaseDatePrice": [
        62.13
      ]
    }
  ]
}

问题是我现在已经复制了purchaseDatePrice，并且只需要在ID、标题等所在的对象中使用它。

this.cryptoLocalStorage.push({ purchaseDatePrice: values});

导致问题，但如果我删除它，this.cryptoLocalStorage[i].purchaseDatePrice = values[0]; 将不再工作。

我也尝试将this.cryptoLocalStorage[i].push({ purchaseDatePrice: values}); 与索引一起使用，但导致错误TypeError: _this2.cryptoLocalStorage[i].push is not a function

【问题讨论】：

标签： arrays vue.js promise vuejs2 javascript-objects

【解决方案1】：

试试

Vue.set(this.cryptoLocalStorage[i], 'purchaseDatePrice', values[0]) 而不是

this.cryptoLocalStorage[i].purchaseDatePrice = values[0];

如果 purchaseDatePrice 属性在单个数组项的初始模型中不存在，则不能只向该项添加新属性。 I bet that THIS will explain nature of your problem

【讨论】：