IE 11에서 코드 블록 루핑하기

Question

프로젝트의 경우 자바 스크립트에 지정된 객체 목록을 반복하여 HTML 표에 가로로 표시해야합니다. 여기 예 : https://jsfiddle.net/50wL7mdz/83227/

HTML :

<div id="app"> 
    <table> 
    <thead><tr><td colspan='5'>{{body.title}}</td></tr></thead> 
    <tbody> 
    <tr> 
     <template v-for='car in body.cars'> 
     <td>{{car.make}}</td> 
     <td>{{car.model}}</td> 
     <td>{{car.year}}</td> 
     </template> 
    </tr> 
    </tbody> 
    </table> 
</div> 

자바 스크립트 : 실제 프로젝트에서

new Vue({ 
    el: '#app', 
    data: { 
    body: {title : 'test title', 
    cars: [{make: 'Honda', model: 'Civic', year: 2010}, 
    {make: 'Toyota', model: 'Camry', year: 2012}, 
    {make: 'Nissan', model: 'Versa', year: 2014}]} 
    } 
}) 

는 알 수없는 그래서 루프에서 "자동차"의 길이가 불가피하다. 예제는 Chrome과 Firefox에서는 잘 작동하지만 IE에서는 작동하지 않습니다.

Vue 개발자 팀에 문의 한 후 그들은 템플릿 태그가 IE의 "tr"에 허용되지 않는다고 알려 주었고 대신 문자열 기반 템플릿을 사용해야합니다. 그러나 Vue 구성 요소를 사용해 본 후에 Vue는 템플릿의 여러 루트 요소를 허용하지 않습니다. 여기에 Vue 티켓 링크 (폐쇄) : https://github.com/vuejs/vue/issues/7243

IE를 사용하는 것이 좋을까요?

Answer 1

Evan은 구성 요소를 html로 선언하고 Vue를 마운트했다고 선택했습니다. 이것이 IE11의 문제점입니다. 브라우저는 먼저 Vue에 대해 알기 전에 html을 처리하고 template 태그에 도달하면 js를 처리하기 전에 심각한 오류에 도달합니다. IE에서 템플릿 태그를 처리하기 위해서는 Vue에서 브라우저에 제공해야하므로 Vue가 해석을 수행 할 수 있습니다. 이것이 문자열 기반 템플리트가 권장되는 이유입니다. Vue는 템플리트를 문자열로 취한 다음 표시 할 브라우저 HTML을 제공합니다.

다음과 같이 Vue는 템플릿에 대해 하나의 루트 요소 만 가질 수 있습니다. 해결 방법은 하나의 루트 요소가있을 때까지 DOM 트리에서 계속 백업하는 것입니다. 이 경우 전체 테이블을 템플릿으로 만듦을 제안합니다.그런 다음 당신은 것입니다 :

자바 스크립트 :

Vue.component('car-table', { 
    data: function() { 
     return { 
     title: 'test title', 
     cars: [{ 
      make: 'Honda', 
      model: 'Civic', 
      year: 2010 
     }, { 
      make: 'Toyota', 
      model: 'Camry', 
      year: 2012 
     }, { 
      make: 'Nissan', 
      model: 'Versa', 
      year: 2014 
     }] 
     }; 
    }, 
    template: '\ 
    <table>\ 
     <thead>\ 
     <tr>\ 
      <td colspan="5">{{title}}</td>\ 
     </tr>\ 
     </thead>\ 
     <tbody>\ 
     <tr>\ 
      <template v-for="car in cars">\ 
      <td>{{car.make}}</td><td>{{car.model}}</td><td>{{car.year}}</td>\ 
      </template>\ 
     </tr>\ 
     </tbody>\ 
    </table>', 
}); 

new Vue({ 
    el: '#app', 
}); 

및 HTML :이 반영 jsfiddle 업데이트되었습니다

<div id="app"> 
    <car-table></car-table> 
</div> 

.

Answer 2

편집 :이 항목을 읽지 마십시오. Vue 1에서만 정확합니다!

나는 지금 당신이 이것을 할 수있을 것이라고 생각하지 않습니다. IE는 템플릿 태그를 허용하지 않으므로 <tr is="component-name">을 사용하고 tr 또는 td에 적용 할 수있는 별도의 구성 요소 (단일 루트 요소 포함)가 있어야합니다. 각 요소를 반복하고 3을 추가하면 td을 수행 할 수 없습니다.

다시 tr 또는의 is 특성을 사용하는 것이 현재 솔루션이지만 요청한대로 다중 루트 구성 요소를 허용하지 않습니다. 아마도 각 자동차에 대한 구성 요소를 만들고 <td is="car-component">을 수행 한 다음 TD를 3 열로 표시하도록 스타일을 지정할 수 있습니다.

Answer 3

에반이 문제의 답을 제공합니다. string template을 사용하십시오.

new Vue({ 
    el: '#app', 
    template: "\ 
    <table>\ 
    <thead><tr><td colspan='5'>{{body.title}}</td></tr></thead>\ 
    <tbody>\ 
    <tr>\ 
     <template v-for='car in body.cars'>\ 
     <td>{{car.make}}</td>\ 
     <td>{{car.model}}</td>\ 
     <td>{{car.year}}</td>\ 
     </template>\ 
    </tr>\ 
    </tbody>\ 
    </table>", 
    data: { 
    body: {title : 'test title', 
    cars: [{make: 'Honda', model: 'Civic', year: 2010}, 
    {make: 'Toyota', model: 'Camry', year: 2012}, 
    {make: 'Nissan', model: 'Versa', year: 2014}]} 
    } 
}) 

불건전 메시지 신고 IE에서 작동하는 것처럼 보입니다. render function을 쓸 수도 있습니다.

render: function(h){ 
    let cells = [] 
    for (var i=0; i < this.body.cars.length; i++){ 
    cells.push(h("td", this.body.cars[i].make)) 
    cells.push(h("td", this.body.cars[i].model)) 
    cells.push(h("td", this.body.cars[i].year)) 
    } 

    let header = h("thead", [h("tr", [h("td", {attrs: {colspan: 5}}, [this.body.title])])]) 
    let body = h("tbody", [h("tr", cells)]) 

    return h("table", [header, body]) 
}