如果正在从数据库

Question

我有一个vue js应用程序，它使用ajax从数据库中提取数据并在基础选项卡中显示它们。我已经模仿了所有内容，我知道如何，但不幸的是内容没有出现。

我的Vue组件代码如下。

<template>
    <section>
        <pos-header></pos-header>

        <div id="products">
            <ul class="tabs" data-tabs id="product-types">
                <li class="tabs-title" v-for="type, index in products.types" :class="{ 'is-active': index == 0}">
                    <a :href="'#' + type.name">
                        {{ type.name }}
                    </a>
                </li>
            </ul>

            <div class="tabs-content" data-tabs-content="product-types">
                <div v-for="type, index in products.types" class="tabs-panel" :class="{ 'is-active': index == 0}" :id="type.name">
                    <p>Products</p>
                    <p>{{ index }} {{ type }}</p>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import { mapActions } from 'vuex';

import Header from './includes/Header.vue';

export default{
    data() {
        return {
            products: {
                types: []
            }
        }
    },

    components: {
        'pos-header': Header,
    },

    mounted(){

        let url = this.$store.getters.getApiUrl + '/product/types';

        axios.get(url).then( response => {
            this.products.types = response.data.productTypes;
            $(document).foundation();
        });
    }
}
</script>

挂载的方法获取数据并将其保存在名为products types的数据属性中，并且我已确定正在检索项目。此应用程序包含在laravel应用程序中，laravel处理后端api。

我还应该补充一点，我能够看到更改标签内容的链接，但不会显示标签的内容。