Как исправить ошибку с vue компонентом?

Question

[Даниил Постнов]

Есть 2 компонента: PromocodesTable, PromocodesItem. Оба однофайловые компоненты vue.
Вылезает ошибка: "Unknown custom element: "

Код PromocodesItem

<template>
  <tr class="table-row">
      <td class="table-col">
          <span>9</span>
      </td>
      <td class="table-col">
          <span>Вконтакте</span>
      </td>
      <td class="table-col">
          <span>10%</span>
      </td>
      <td class="table-col">
          <span
              :class="{ 'text-green': width <= 767 }"
          >
              {{ width <= 767 ? 'Активен' : 'Да'}}
          </span>
      </td>
  </tr>
</template>

<script>
export default {
  name: 'PromocodesItem'
}
</script>

Код PromocodesTable:

<template>
    <div class="promocodes-component">
        <table class="table finances-table promocodes-table">
            <thead
                v-if="width > 767"
                class="table-head"
            >
                <tr class="table-row">
                    <td class="table-col" style="width: 10%">
                        <span class="text-semi">ID</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Промокод</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Величина</span>
                    </td>
                    <td class="table-col" style="width: 30%">
                        <span class="text-semi">Активность</span>
                    </td>
                </tr>
                <tr height="20"></tr>
            </thead>
            <tbody class="table-body finances-table-body">
                <PromocodesItem></PromocodesItem>
            </tbody>
        </table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { PromocodesItem } from './PromocodesItem.vue';

export default {
    name: 'PromocodesTable',
    computed: {
        ...mapGetters({
            width: 'ui/width'
        })
    },
    components: {PromocodesItem}
}
</script>

Вопрос. Почему не срабатывает импорт? При mount в promocodesTable переменная PromocodesItem == undefined

Оба компонента на одном уровне.

Answer 1

[Михаил]

import PromocodesItem from "./PromocodesItem.vue";

Comments

[Даниил Постнов]

Спасибо!

Answer 2

[Andrey Suha]

<promocodes-item></promocodes-item> вот так пиши в template

Comments

[Михаил]

Это не сильно играет роль, у него import не правильный