Vuejs: Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство '3', равное нулю»

Question

Я пытаюсь создать форму, с помощью которой я могу вводить и обновлять значения в базе данных, но всегда получаю предупреждение и не знаю, как от него избавиться. У меня есть массив, содержащий объекты со значениями id, например:

data = [{id_a: 2, id_b: 3},{id_a: 5, id_b: 10}, ...]

В шаблоне соответствующего компонента я перебираю этот массив и создаю строку в таблице для каждого объекта:

<template>
<div>
<table>
<tr
    v-for="(dataset, i) in data"
    :key="i"
    >
    <td>{{ a_selection[dataset.id_a] }}</td>
    <td>{{ b_selection[dataset.id_b] }}</td>
    </tr>
</table>
</div>
</template>

, поскольку я не хочу отображать значения id, а скорее имена, которые с ними связаны, я получаю имена из двух объектов, здесь называемых a_selection и b_selection.

Я получаю эти объекты в части сценария с сервера во время хука created следующим образом:

<script>
import axios
export default {
    created() {
        axios.get(http://127.0.0.1:5000/get_a/").then(response => (this.a_selection= response.data));
        axios.get(http://127.0.0.1:5000/get_b/").then(response => (this.b_selection= response.data));
    },
    data() {
        return {
            a_selection: null,
            b_selection: null,
            data: [{id_a: 2, id_b: 3},{id_a: 5, id_b: 10}]
        }
    }
};
</script>

когда я пытаюсь нарисовать это, я получаю vue предупреждения:

[Vue warn]: Error in render: "TypeError: Cannot read property '2' of null"

и введите ошибки:

TypeError: Cannot read property '2' of null

По какой-то причине подобное выполнение вызывает у меня несколько из этих ошибок, но, в конце концов, нужная таблица отображается правильно. Кто-нибудь может помочь мне понять, что здесь происходит?

Answer 1

, поэтому в первый раз он пытается отобразить a_selection[2], который все еще не существует

• добавить новые данные с именем loading, и вы можете сначала установить для него значение false
• в функции created() перед отправкой любого запроса вы можете установить для загрузки значение true this.loading = true
• , и как только вы успешно загрузите все данные из бэкэнда, вы можете снова установить для загрузки значение false
• и вы можете использовать v-if для загрузки загрузчика, когда для него установлено значение true, и v-else для рендеринга вашей таблицы, когда ваши данные загружены.
• Вы можете использовать любые другие данные, подобные этим (загружены, получены , ...), чтобы иметь возможность использовать v-if и v-else для правильной обработки ваших данных.