javascript - Vue v-for 循环“项目”未定义
问题描述
我遇到了一个问题,当尝试遍历内容并将其显示在我的 HTML 中时,“项目”被返回为未定义。任何帮助是极大的赞赏。
jinja2.exceptions.UndefinedError: 'item' 未定义
HTML
<template id="home">
<div>
<b-button v-b-toggle.collapse-1 variant="primary">Test</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text" v-for="item in records">
{{ item.model }}
</p>
</b-card>
</b-collapse>
</div>
</template>
JAVASCRIPT
const home = {
template: '#home',
data: function () {
return {
records: [],
loading: true
}
},
created: function () {
this.loadRecords();
},
computed: {
},
methods: {
async loadRecords() {
this.loading = true;
try {
await axios.request({
url: 'load_records',
method: 'GET'
})
.then(response => {
this.records = JSON.stringify(response.data['records']);
console.log(this.records);
})
} catch (err) {
alert("Could not get the list of devices\n" + err);
}
},
}
}
console.log(this.records);
[{"aaa_binding":"F","aaa_connection":"T","aaa_console":"T","aaa_network":"T","aaa_system":"F","aaa_vty":"T","banner":"T","exec_timeout_console":"F","exec_timeout_ssh":"T","finger_service":"T","hostname":"test1","id":615,"logging_buffer":"T","logging_remote":"T","logging_timestamp":"T","loopback":"T","model":"Test-model1","ntp":"T","ntp_binding":"T","remote_startup_config":"T","snmp":"F","vendor":"Cisco"},{"aaa_binding":"F","aaa_connection":"T","aaa_console":"T","aaa_network":"T","aaa_system":"F","aaa_vty":"T","banner":"T","exec_timeout_console":"F","exec_timeout_ssh":"T","finger_service":"T","hostname":"Test2","id":892,"logging_buffer":"T","logging_remote":"T","logging_timestamp":"T","loopback":"T","model":"Test-Model2","ntp":"T","ntp_binding":"T","remote_startup_config":"T","snmp":"F","vendor":"Cisco"}]
解决方案
我会推荐一个建议,将 v-bind:key="" 添加到指令 v-for 中:
<p class="card-text" v-for="(item, index) in records" v-bind:key="index">
{{ item.model }}
</p>
此外,确保记录数组具有“模型”属性。
更改此代码:
this.records = JSON.stringify(response.data['records']);
至:
this.records = response.data.records;
推荐阅读
- php - 如何在 php 中生成集成 grcode
- javascript - 我有两个数组(1 个数字数组 + 1 个字符串数组)。我怎样才能以完全相同的方式对它们进行排序?
- javascript - 如何在 v-dialog 中处理和 v-if 检查?
- python - 通过 pd.to_datetime 转换日期
- apache-spark - 如何处理 azure databricks 笔记本中的异常?
- node.js - 如何管理对 Google Cloud Storage (Node.js) 中对象的权限?
- python - 如何在python中删除字典列表值中的'\ n'?
- javascript - reactjs中的可选导出
- azure-active-directory - 如何在 Azure 中自动进行 PIM 登录?
- javascript - 如何在 react-native 中获取当前的 y 值?