Vue v-for 循环“项目”未定义

Question

我遇到了一个问题，即在尝试遍历内容并将其显示在我的 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>

爪哇脚本

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"}]

Answer 1

我将推荐一个建议，将 v-bind:key="" 添加到指令 v-for：

<p class="card-text" v-for="(item, index) in records" v-bind:key="index">
  {{ item.model }}
</p>

此外，请确保记录数组具有 'model' 属性。

更改此代码：

this.records = JSON.stringify(response.data['records']);

到：

this.records = response.data.records;

Answer 2

JSON.stringify()方法将 Object(JSON) 类型转换为 String 类型。

所以调用API后，this.record的数据类型是String

您需要更改代码；

this.records = response.data.records