英文:
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 "]"。所以我需要在这里使用正则逻辑或者如何修复它？我期望在模板中动态获取数据。
<div v-for="(data, i) in csvData" :key="i">
<div class="table__content-item">
<p class="table__content-text">{{data[1655164800000]}}</p> // 运行正常
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p> // 引发错误
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['BTC/USD']}}</p> // 引发错误
</div>
</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 -->
<div v-for="(data, i) in csvData" :key="i">
<div class="table__content-item">
<p class="table__content-text">{{data[1655164800000]}}</p> // runs ok
</div>
<div class="table__content-item">
<p class="table__content-text">{{data[2022-06-14 00:00:00]}}</p> // gives an error
</div>
<div class="table__content-item">
<p class="table__content-text">{{data[BTC/USD]}}</p> // gives an error
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
根据Daniel的建议，您需要使用正确的标记符号。
如果键不是数字，索引必须通过字符串进行；您也不能直接使用连字符和正斜杠。
**注意：**我不确定您为什么要使用1655164800000和2022-06-14 00:00:00作为键。此外，CSV数据通常是一个矩阵，而不是一个对象数组，所以变量名可能会误导。
new Vue({
el: "#app",
data: {
csvData: [
{ '1655164800000': 1, '2022-06-14 00:00:00': 1, 'BTC/USD': 1 },
{ '1655164800000': 2, '2022-06-14 00:00:00': 2, 'BTC/USD': 2 },
{ '1655164800000': 3, '2022-06-14 00:00:00': 3, 'BTC/USD': 3 },
]
}
});
.table__content-item { display: inline-block; }
.table__content-item > p { margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(data, i) in csvData" :key="i">
<div class="table__content-item">
<p class="table__content-text">{{data['1655164800000']}}</p>
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p>
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['BTC/USD']}}</p>
</div>
</div>
</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 -->
new Vue({
el: "#app",
data: {
csvData: [
{ '1655164800000': 1, '2022-06-14 00:00:00': 1, 'BTC/USD': 1 },
{ '1655164800000': 2, '2022-06-14 00:00:00': 2, 'BTC/USD': 2 },
{ '1655164800000': 3, '2022-06-14 00:00:00': 3, 'BTC/USD': 3 },
]
}
});
<!-- language: lang-css -->
.table__content-item { display: inline-block; }
.table__content-item > p { margin: 0; }
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(data, i) in csvData" :key="i">
<div class="table__content-item">
<p class="table__content-text">{{data['1655164800000']}}</p>
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['2022-06-14 00:00:00']}}</p>
</div>
<div class="table__content-item">
<p class="table__content-text">{{data['BTC/USD']}}</p>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论