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

Question

我试图弄清楚如何使循环在 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>

Answer 1

首先，您缺少结束</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 ://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript- 表达式）。

Answer 2

感谢您的回答，我已根据您的建议更正了代码段中的代码。 代码现在按预期工作。 我学到的主要是 Vue <template>组件类似于<Fragment>的 React 组件

 document.addEventListener('DOMContentLoaded', function() { 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"), open: 1.2, close: 1.5, high: 1.6, low: 1.2, }, ], }, { id: 1, name: "USDRUB", candles: [ { timeStamp: timeStamp .subtract(1, "days") .format("YYYY-MM-DD"), open: 75, close: 76, high: 77, low: 73, }, { timeStamp: timeStamp.format("YYYY-MM-DD"), open: 76, close: 77, high: 79, low: 75, }, ], }, ], }, methods: { moment: moment, getChange(candle) { const { open, close } = candle; return Number.parseFloat((100 / (open / (close - open)))).toFixed(2); } } }); });

 <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> <template v-for="symbol in symbols"> <tr v-for="(candle, index) in symbol.candles" :key="symbol.name + '-' + index"> <td>{{ symbol.name }}</td> <td>{{ getChange(candle) }} %</td> <td>{{ moment(candle.timeStamp).format("YYYY-MM-DD") }}</td> </tr> </template> </tbody> </table> </script> <div id="app"></div>