У меня странная проблема, которую я не могу понять.
У меня есть компонент таблицы
<b-table striped hover :items="items" :fields="columns" :busy="busy">
<template v-slot:cell(id)="data">
{{data.item[column]}}
<manage :id="data.item[column]" />
</template>
<div slot="table-busy" class="text-center my-2">
</div>
</b-table>
<script>
export default {
props: {
parentProps: {
type: Object,
description: "custom props to generate correct id links"
}
},
computed: {
column() {
return this.parentProps.idColumn;
},
}
}
</script>
Этот компонент вызывается маршрутизатором для каждой страницы списка в моем приложении. Я передаю реквизит idColumn
из parentProp
от родителя, чтобы передать его в шаблон слота таблицы для компонента manage
. Идея состоит в том, чтобы передать имя столбца моего списка объектов, чтобы получить правильное имя (может быть userId или addressId или что-либо еще)
Компонент управления -
<template>
<div>
<router-link :to="getLink(id)">
<i class="nc-icon nc-settings-gear-65 text-success"></i>
</router-link>
</div>
</template>
<script>
export default {
name: "manage",
props: ["id"],
methods: {
getLink(id) {
return this.$route.path + "/" + id;
}
},
};
</script>
Теперь, когда я впервые загружаю приложение, все работает должным образом, а также при переходе от страницы списка к странице, не включенной в список, но при переходе от вида списка к другому (от пользователяList to Address List, например) я вижу, что parentProps прибывает после рендеринга компонента Manage, поэтому вычисляемое свойство column()
не определено ... Какой правильный способ справиться с этой ситуацией? Все поля таблицы отображаются правильно