変数はIE 11ではVue.jsを使用して定義されていません

Question

Vue.jsで開始しました。私はここでjsfiddleで何をしているのか分かりません：https://jsfiddle.net/07uzLvum/2/。クロムでうまく動作しますが、IE 11では 'c'が未定義です 'File：vue.js、Line：2252、Column 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>を削除し、for eachループを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を受け取ることはないと仮定していましたが、forループがTDの外に持ち上げているようです。

思考？