변수는 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 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 외부에서 끌어 올리는 것처럼 보입니다.

생각하십니까?