Vue JS - Моя опора не определена, когда вызывается дочерний компонент - PullRequest
0 голосов
/ 07 октября 2019

У меня странная проблема, которую я не могу понять.

У меня есть компонент таблицы

<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() не определено ... Какой правильный способ справиться с этой ситуацией? Все поля таблицы отображаются правильно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...