Question

我似乎有一个非常简单的列表呈现情况，但似乎无法使其正常工作。我有一个组件，当挂载事件触发时，它会向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: {}
});

此包裹清单如下所示：

list view

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

page view

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

Answer 1

尝试先检查是否有物品，然后再变红色：

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

或

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

Answer 2

我终于明白了。我从其他人那里继承了这个项目，除了Vue之外，他们还加载了其他几个JavaScript库。在删除了我专门为自己的代码所需要的库以外的所有库之后，它运行良好。显然是另一个图书馆在干扰。目前尚不确定哪一个。感谢您的帮助。

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

2 个答案: