如何在Vue.js中使用v-for循环迭代？

huangapple
go评论96阅读模式
英文:

How to iterate with a v-for loop in vue js?

问题

我正在使用Vue中的v-for循环遍历一个CSV文件数组。为了获取数据，我通常使用{{data.key}}。但当我遇到键"2022-06-14 00:00:00"和"BTC/USD"时，JavaScript/Vue会抛出错误"Unexpected token, expected "]"。所以我需要在这里使用正则逻辑或者如何修复它？我期望在模板中动态获取数据。

  1. <div v-for="(data, i) in csvData" :key="i">
  2.   <div class="table__content-item">
  3.     <p class="table__content-text">{{data[1655164800000]}}</p> // 运行正常
  4.   </div>
  5.   <div class="table__content-item">
  6.     <p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p> // 引发错误
  7.   </div>
  8.   <div class="table__content-item">
  9.     <p class="table__content-text">{{data['BTC/USD']}}</p>   // 引发错误
  10.   </div>
  11. </div>

注意：在访问CSV数据的对象属性时，如果属性名包含特殊字符或空格，需要将属性名用单引号括起来，如上所示。这样可以避免JavaScript解释器错误地解释属性名。

英文:

I'm itterating through an array of csv file with a v-for loop in vue. To get the data I use to do {{data.key}} as usual. But when I come to keys "2022-06-14 00:00:00" and "BTC/USD" JavaScript/vue throws the error Unexpected token, expected "]". So do I nedd regex logic here or how to fix it ? I'm expecting to get the dynamically the data in a template.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. &lt;div v-for=&quot;(data, i) in csvData&quot; :key=&quot;i&quot;&gt;
  2.   &lt;div class=&quot;table__content-item&quot;&gt;
  3.     &lt;p class=&quot;table__content-text&quot;&gt;{{data[1655164800000]}}&lt;/p&gt; // runs ok
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;table__content-item&quot;&gt;
  6.     &lt;p class=&quot;table__content-text&quot;&gt;{{data[2022-06-14 00:00:00]}}&lt;/p&gt; // gives an error
  7.   &lt;/div&gt;
  8.   &lt;div class=&quot;table__content-item&quot;&gt;
  9.     &lt;p class=&quot;table__content-text&quot;&gt;{{data[BTC/USD]}}&lt;/p&gt;   // gives an error
  10.   &lt;/div&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

根据Daniel的建议，您需要使用正确的标记符号。

如果键不是数字，索引必须通过字符串进行；您也不能直接使用连字符和正斜杠。

**注意：**我不确定您为什么要使用1655164800000和2022-06-14 00:00:00作为键。此外，CSV数据通常是一个矩阵，而不是一个对象数组，所以变量名可能会误导。

  1. new Vue({
  2.   el: "#app",
  3.   data: {
  4.     csvData: [
  5.       { '1655164800000': 1, '2022-06-14 00:00:00': 1, 'BTC/USD': 1 },
  6.       { '1655164800000': 2, '2022-06-14 00:00:00': 2, 'BTC/USD': 2 },
  7.       { '1655164800000': 3, '2022-06-14 00:00:00': 3, 'BTC/USD': 3 },
  8.     ]
  9.   }
  10. });
  1. .table__content-item { display: inline-block; }
  3. .table__content-item > p { margin: 0; }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  2. <div id="app">
  3.   <div v-for="(data, i) in csvData" :key="i">
  4.     <div class="table__content-item">
  5.       <p class="table__content-text">{{data['1655164800000']}}</p>
  6.     </div>
  7.     <div class="table__content-item">
  8.       <p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p>
  9.     </div>
  10.     <div class="table__content-item">
  11.       <p class="table__content-text">{{data['BTC/USD']}}</p>
  12.     </div>
  13.   </div>
  14. </div>
英文:

As Daniel suggested, you need to use the correct notation usage.

If the key in non-numeric, indexing must be via a string; nor can you use hyphens and forward-slashes literally.

Note: I am not sure why you're using 1655164800000 and 2022-06-14 00:00:00 as keys. Furthermore, CSV data is typically a matrix, not an object array, so the variable name is misleading.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. new Vue({
  2.   el: &quot;#app&quot;,
  3.   data: {
  4.     csvData: [
  5.       { &#39;1655164800000&#39;: 1, &#39;2022-06-14 00:00:00&#39;: 1, &#39;BTC/USD&#39;: 1 },
  6.       { &#39;1655164800000&#39;: 2, &#39;2022-06-14 00:00:00&#39;: 2, &#39;BTC/USD&#39;: 2 },
  7.       { &#39;1655164800000&#39;: 3, &#39;2022-06-14 00:00:00&#39;: 3, &#39;BTC/USD&#39;: 3 },
  8.     ]
  9.   }
  10. });

<!-- language: lang-css -->

  1. .table__content-item { display: inline-block; }
  3. .table__content-item &gt; p { margin: 0; }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js&quot;&gt;&lt;/script&gt;
  2. &lt;div id=&quot;app&quot;&gt;
  3.   &lt;div v-for=&quot;(data, i) in csvData&quot; :key=&quot;i&quot;&gt;
  4.     &lt;div class=&quot;table__content-item&quot;&gt;
  5.       &lt;p class=&quot;table__content-text&quot;&gt;{{data[&#39;1655164800000&#39;]}}&lt;/p&gt;
  6.     &lt;/div&gt;
  7.     &lt;div class=&quot;table__content-item&quot;&gt;
  8.       &lt;p class=&quot;table__content-text&quot;&gt;{{data[&#39;2022-06-14 00:00:00&#39;]}}&lt;/p&gt;
  9.     &lt;/div&gt;
  10.     &lt;div class=&quot;table__content-item&quot;&gt;
  11.       &lt;p class=&quot;table__content-text&quot;&gt;{{data[&#39;BTC/USD&#39;]}}&lt;/p&gt;
  12.     &lt;/div&gt;
  13.   &lt;/div&gt;
  14. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月18日 03:41:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76707635.html
  • javascript
  • v-for
  • vue.js
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定