Javascript 在v-for指令中未呈现列表

我有一个非常简单的列表呈现情况，但似乎无法让它工作。我有一个组件，当挂载事件触发时，它会向API发送一个异步调用以获取数据。在获取数据时，它使用数据的值设置packages数组。但是，该列表从未在Vue中实际呈现。我以前做过很多次，没有问题。不知道现在是什么问题

Vue.component("tech-editing-queue", {
    props: [],
    data: function () {
        return {
            packages: []
        };
    },

    template: `
        <div>
            <div class="table-responsive">
                    <table id="package-table" class="table table-striped">
                        <thead>
                            <tr>
                                <th><a href="#" style="color: inherit;">Package</a></th>
                                <th><a href="#" style="color: inherit;">Submitter</a></th>
                                <th><a href="#" style="color: inherit;">Status</a></th>
                                <th><a href="#" style="color: inherit;">Pages</a></th>
                                <th><a href="#" style="color: inherit;">Review Type</a></th>
                                <th><a href="#" style="color: inherit;">Description</a></th>
                                <th><a href="#" style="color: inherit;">Document Name(s)</a></th>
                                <th><a href="#" style="color: inherit;">Submission Date</a></th>
                                <th><a href="#" style="color: inherit;">Requested Due Date</a></th>
                                <th><a href="#" style="color: inherit;"></a></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="package in packages">
                                <td>
                                    <button type="button" class="btn btn-link">
                                        <span class="glyphicon glyphicon-duplicate"></span>
                                        <span style="margin: 0px 6px;">{{ package.PackageName }}</span>
                                        <span class="label label-primary" style="border-radius: 50%;">1</span>
                                    </button>
                                </td>
                                <td>{{ package.Submitter.LastName }}, {{ package.Submitter.FirstName }}</td>
                                <td>
                                    <h4 style="margin: 0px;">
                                        <span class="label label-info">
                                            {{ package.StateString }}
                                        </span>
                                    </h4>
                                </td>
                                <td>{{ package.Pages }}</td>
                                <td>{{ package.ReviewType }}</td>
                                <td>{{ package.DocumentType.Description }}</td>
                                <td><span>{{ package.DocumentNames }}</span></td>
                                <td><span>{{ package.SubmissionDate }}</span></td>
                                <td><span>{{ package.RequestedDueDate }}</span></td>
                                <td><button id="package-menu-7112" type="button" class="btn btn-link"><i class=" fa fa-ellipsis-h fa-1x undefined" aria-hidden="true"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
            </div>
        </div>
    `,

    mounted: function () {
        fetch("/api/tech-editing-packages")
            .then(res => res.json())
            .then(response => this.packages = response)
            .catch(error => console.log("Packages Error: ", error));
    },

    watch: {},

    methods: {}
});

组件（“技术编辑队列”{
道具：[]，
数据：函数（）{
返回{
套餐：[]
};
},
模板：`
{{package.PackageName}
1.
{{package.Submitter.LastName}，{{package.Submitter.FirstName}
{{package.StateString}}
{{package.Pages}
{{package.ReviewType}
{{package.DocumentType.Description}
{{package.DocumentNames}
{{package.SubmissionDate}
{{package.RequestedDueDate}
`,
挂载：函数（）{
获取（“/api/tech编辑包”）
.then（res=>res.json（））
.然后（response=>this.packages=response）
.catch（错误=>console.log（“包错误：”，错误））；
},
手表：{}，
方法：{}
});

此包列表如下所示：

渲染后的页面看起来像这样

---

我希望页面以表格形式呈现包，但它没有。请尝试在使项目变红之前检查是否有项目：

<tr v-if="packages.length > 0" v-for="package in packages">

或

我终于明白了这一点。我从其他人那里继承了这个项目，他们加载了Vue以外的其他几个javascript库。除去我自己的代码所需的库之外的所有库之后，它工作得很好。显然是另一个图书馆在干预。现在我不确定是哪个。谢谢您的帮助。

我在发布的代码中没有看到任何明显的错误。大概没有控制台错误吧？是否检查了vue devtools中的数据属性？没有控制台错误。我希望有。我不能使用vue开发工具。我希望我能。我在一个无法使用任何Chrome扩展或插件的项目中。很烦人。没有节点、npm或类似的东西。是的，最好这样做。

<tr v-if="packages[0].Submitter !== undefiend" v-for="package in packages">