Почему внутри компонента не выводится свойство, а за пределами все норм?

Question

[KoRNeT46RuS]

Vue.component('tree-items', {
    template: '#tree-template',
    props: {
        item: {
            type: Object,
            required: true,
        },
    },
    data: function () {
        return {
            isOpen: false,
            page: {},
            navigation: {},
        };
    },
    computed: {
        hasChildren: function () {
            return this.toArray(this.item.children).length;
        },
        hasItems: function() {
            if (!this.isUndefined(this.items)) {
                return this.items.length;
            }
            return 0;
        },
    },
    methods: {
        toggle: function () {
            if (this.hasChildren) {
                this.isOpen = !this.isOpen
            }
        },
        setItem: function (_item) {
            this.item = _item;
        }
    },
    mounted: function () {
        this.setItem(this.item);
    }
});

Темплейт

<ul v-for="item in items" :key="item.id">
            <tree-items
                    :item="item"
            ></tree-items>
        </ul>
<script type="text/x-template" id="tree-template">
    {{ item }}
</script>

Если выводить объект не внутри компонента, то он распечатывается, если внутри, то он пуст, хотя помошник в браузере пишет, что он есть.

Answer 1

[0xD34F]

<script type="text/x-template" id="tree-template">
    {{ item }}
</script>

Что, просто текст? Нет, так не будет. Должен быть какой-то элемент. Сделайте li - вы же внутри ul пытаетесь их выводить:

<script type="text/x-template" id="tree-template">
  <li>{{ item }}</li>
</script>

<ul v-for="item in items" :key="item.id">
            <tree-items
                    :item="item"
            ></tree-items>
        </ul>

Множество списков с одним элементом? Может, должен быть один список с множеством элементов? - переносим v-for внутрь списка (кстати, а какого чёрта в имени компонента элемента списка множественное число? почему items, а не item?):

<ul>
  <tree-items
    v-for="item in items"
    :key="item.id"
    :item="item"
  ></tree-items>
</ul>

Comments

[KoRNeT46RuS]

Попробовал так, не выходит:

<script type="text/x-template" id="tree-template">
    <li><div>{{ item }}</div></li>
</script>

[0xD34F]

KoRNeT46RuS, ну тогда идите воспроизводите свою ситуацию в песочнице, ссылку сюда. Гадать, где ещё вы накосячили и как, я не намерен.