时间戳

首页 > 解决方案 > 如何在 Vue 的 v-for 循环中使用数组映射？

javascript - 如何在 Vue 的 v-for 循环中使用数组映射？

问题描述

我试图弄清楚如何使循环在 Vue 中的另一个循环中工作。使用 React 时，这项任务似乎微不足道，但在 View 中，我不明白在模板/JSX 中使用数组时如何使用标准钩子。

根据条件，输入数据以给定格式来自服务器。目前，由于语法错误，下面附加代码段中的代码不起作用。

你能帮我修复片段中的错误吗？这将帮助我了解如何在相对于 Vue 的模板中的循环中正确应用循环...

const timeStamp = moment(new Date());
var app = new Vue({
  el: "#app",
  template: "#app-template",
  data: {
    symbols: [
      {
        id: 1,
        name: "EURUSD",
        candles: [
          {
            timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
            open: 1.1,
            close: 1.2,
            high: 1.3,
            low: 1.0,
          },
          {
            timeStamp: timeStamp.format("YYYY-MM-DD"), // Today
            open: 1.2,
            close: 1.5,
            high: 1.6,
            low: 1.2,
          }
        ]
      },
      {
        id: 2,
        name: "USDRUB",
        history: [
          {
            timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
            open: 75,
            close: 76,
            high: 77,
            low: 73,
          },
          {
            timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Today
            open: 76,
            close: 77,
            high: 79,
            low: 75,
          }
        ]
      }
    ]
  }
});
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="app-template">
  <table>
    <thead>
      <tr>
        <th>Symbol</th>
        <th>Change</th>
        <th>Time stamp</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(symbol, index) in symbols" :key="index">
        {
          symbol.candles.map(candle => {
            const { name } = symbol
            const { open } = candle.history[0]
            const { close, timeStamp } = candle.history[1]
            const change = Number.parseFloat((100 / (open / (close - open)))).toFixed(2)

            return (
              <td>{{ name }}</td>
              <td>{{ change }} %</td>
              <td>{{ timeStamp }}</td>
            )
          })
        }
      </tr>
    </tbody>
  </tabel>
</script>

标签： javascriptvue.jsjsxv-forarray.prototype.map

解决方案

首先，您缺少结束</table>标签（您有一个错字：）</tabel>。

另外，我会推荐这样的方法：

    <tr v-for="(symbol, index) in symbols" :key="index">
      <template v-for="candle in symbol.candles">
        <td>{{ symbol.name }}</td>
        <td>{{ getChange(candle) }} %</td>
        <td>{{ candle.history[1].timeStamp }}</td>
      </template>
    </tr>

    ...

    methods: {
        getChange(candle) {
            const { open } = candle.history[0];
            const { close } = candle.history[1];
            return Number.parseFloat((100 / (open / (close - open)))).toFixed(2);
        }
    }

该<template>标签可用于此类情况，您希望重复一段代码而不在其周围添加额外的父标签（因为<template>它不会呈现为实际的 HTML 标签）。

我建议将逻辑移出模板并移入方法的原因是 Vue 仅支持每个数据绑定一个表达式（来源：https ://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions ） .

推荐阅读