代码之家  ›  专栏  ›  技术社区  ›  mrks

Vue。js:将Promise结果添加到数组

  •  0
  • mrks  · 技术社区  · 7 年前

    我有以下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、标题等也存在的对象中需要它。

    这cryptoLocalStorage。推送({purchaseDatePrice:values});

    是导致问题的原因,但如果我将其删除, this.cryptoLocalStorage[i].purchaseDatePrice = values[0]; 不再工作了。

    我也试着使用 this.cryptoLocalStorage[i].push({ purchaseDatePrice: values}); 使用索引,但会导致错误 TypeError: _this2.cryptoLocalStorage[i].push is not a function

    1 回复  |  直到 7 年前
        1
  •  1
  •   donMateo    7 年前

    尝试

    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