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

Question

I'm having an issue where "item" is being returned as undefined when trying to loop over the contents and display it in my HTML. Any help is greatly appreciated.

jinja2.exceptions.UndefinedError: 'item' is undefined

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

Answer 1

I will recommended one advice, add v-bind:key="" to the directive v-for:

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

In addittion, make sure that records array has 'model' property.

Change this code:

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

to:

this.records = response.data.records;

Answer 2

JSON.stringify() method is converting Object(JSON) type to String type.

So after call API, this.record's data type is String

You need to change code;

this.records = response.data.records