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

Question

我的列表渲染情况似乎非常简单，但似乎无法让它工作。我有一个组件，当 Mounted 事件触发时，它会向 API 发送异步调用以获取数据。获取数据后，它会使用数据值设置包数组。然而，该列表实际上从未在 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: {}
});

这个包列表如下所示:

list view

渲染后页面如下所示。

page view

我希望页面以表格形式呈现包，但事实并非如此。

Answer 1

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