Question

我刚刚开始使用Vue.js.我在jsfiddle中有一个简化的版本：https://jsfiddle.net/07uzLvum/2/。在Chrome中运行良好，但在IE 11中，我得到了＆＃39; c＆＃39;未定义＆＃39;文件：vue.js，行：2252，第36栏。我动态构建一个HTML表，其中通过查询服务直到运行时才知道列和行。为了在jsfiddle中进行演示，我已使用硬编码值替换了服务调用。完整的代码如下。

<div id="deliverables">
<div v-show="error" class="ProjectDeliverables_error">{{errorMessage}}</div>
<div class="ms-h2 ProjectDeliverables_loading" v-show="!loaded">Sit tight. Shouldn't be long now.</div>
<table style="width:100%;" v-show="loaded">
    <thead>
        <tr>
            <th class="ms-vh2" v-for="column in columns">{{column.title}}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="deliverable in deliverables">
            <template v-for="c in columns">
                <td class="ms-vb2 edit" v-if="c.name === 'Edit'">
                <img src="blank.gif" style="cursor:pointer" />                        
                </td>
                <td v-else>
                    <span v-if="c.name === 'PFO_GatewayStatus'">
                    </span>
                    <span v-else>{{deliverable[c.name]}}</span>
                </td>
            </template>
        </tr>
    </tbody>
</table>

var vm = new Vue({
el: '#deliverables',
data: {
    deliverables: [
        {'Title': 'Test', 'Phase': '0', 'Start': '1/3/2016', 'End': '1/7/2016'},
        {'Title': 'Test 2', 'Phase': '1', 'Start': '1/8/2016', 'End': '1/12/2016'},
        {'Title': 'Test 3', 'Phase': '2', 'Start': '1/13/2016', 'End': '1/17/2016'},
    ],
    columns: [
        {'name': 'Edit', 'title': 'Edit', 'type': 'Computed'},
        {'name': 'Title', 'title': 'Title', 'type': 'String'},
        {'name': 'Type', 'title': 'Type', 'type': 'String'},
        {'name': 'Phase', 'title': 'Phase', 'type': 'String'},
        {'name': 'Edit', 'title': 'Edit', 'type': 'Computed'},
        {'name': 'Start', 'title': 'Start', 'type': 'DateTime'},
        {'name': 'End', 'title': 'End', 'type': 'DateTime'}
    ],
    loaded: true,
    error: false,
    errorMessage: ''
},
methods: {

}

}）;

知道问题是什么吗？

根据回复更新。更新的小提琴：https://jsfiddle.net/07uzLvum/3/ 我需要删除<template>并将每个循环放在td标记上。

<td v-for="c in columns" v-if="c.name === 'Edit'" class="ms-vb2 edit">
                    <img src="blank.gif" style="cursor:pointer" v-on:click="openEditForm(deliverable)" />
                    <i v-if="deliverable.Type === ''" v-on:click="" class="fa fa-line-chart sprint" aria-hidden="true"></i>
                </td>
                <td class="ms-vb2" v-else>
                    <span v-if="c.name === 'Status'" v-html="getGatewayStatusImage(deliverable)">
                    </span>
                    <span v-else>{{deliverable[c.name]}}</span>
                </td>

由于我必须进行v-if / v-else解析，这似乎更难阅读。看看代码，我会假设for循环只会循环通过第一个TD并且永远不会接收v-else TD，但似乎循环在TD之外提升。

思考？

Answer 1

问题在于某些DOM元素（如<tr>）对可以在其中显示的元素有限制 - 这是特定于浏览器的。

在这种情况下，IE11正在吃<template>标签。

有关详细信息，请参阅此处：

http://vuejs.org/guide/components.html#DOM-Template-Parsing-Caveats

Answer 2

就我而言，代码段缺少关闭代码</div>。尝试检查是否有匹配的打开和关闭标签对。

使用Vue.js

2 个答案: