IE 11에서 코드 블록 루핑

IE 11에서 코드 블록 루핑

프로젝트를 위해서, 나는 javascript로 주어진 사물들의 목록을 반복해서 보고, 그것들을 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>

javascript:

 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 dev 팀에 연락한 후, 그들은 나에게 단순히 템플릿 태그는 IE의 "tr"에서 허용되지 않으며, 나는 문자열 기반 템플릿을 대신 사용해야 한다고 알려주었다.그러나 Vue 구성 요소를 실험한 결과 Vue는 템플릿에 여러 루트 요소도 허용하지 않는 것으로 나타났다.여기에서 Vue 티켓 링크(폐쇄): https://github.com/vuejs/vue/issues/7243

이 작업을 수행하고 IE에서도 작동하도록 하는 좋은 방법은 무엇인가?

에반은 당신이 그 구성요소를 html로 선언하고 그 구성요소에 Vue를 탑재하고 있다고 들었다.그것이 IE11의 문제점이다: 브라우저는 Vue에 대해 알기 전에 먼저 html을 처리하고 그것이 도달하면 심각한 오류에 도달한다.templateJ를 처리하기 전에 태그를 추가하십시오.IE 처리를 위해 템플릿 태그를 Vue에서 브라우저로 제공해야 하므로 Vue가 해석을 수행할 수 있다.문자열 기반 템플릿이 권장되는 이유는 다음과 같다.Vue는 템플릿을 문자열로 선택한 다음 브라우저에 표시할 HTML을 제공한다.

그러면 당신이 픽업한 대로 Vue는 템플릿에 대한 루트 요소를 하나만 가질 수 있다.해결책은 루트 요소가 하나 있을 때까지 DOM 트리에서 계속 백업하는 것이다.이 경우에는 테이블 전체를 템플릿으로 만들 것을 제안한다.그러면 다음과 같이 할 수 있을 것이다.

javascript:

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:

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

나는 이것을 반영하기 위해 jsfiddle을 업데이트했다.

이반은 그 문제에 대한 답을 준다.문자열 템플릿을 사용하십시오.

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(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])
}

편집: 이건 읽지 마, Vue 1에 대해서만 정확해!

나는 네가 지금 이 일을 할 수 있을 거라고 생각하지 않아.IE는 단순히 템플릿 태그를 허용하지 않기 때문에 이를 위한 유일한 방법은<tr is="component-name">그리고 (단일 루트 요소가 있는) 별도의 구성요소를 가지며, 이 구성요소는 에 적용될 수 있다.tr또는td.각 요소를 반복하고 3개 추가td는 할 수 s는 수 없다.

다시 말하지만is의 탓으로 돌리다tr또는td현재 솔루션이지만, 요청하신 대로 멀티 루트 구성요소를 허용하지 않는 솔루션.아마도 당신은 각각의 자동차에 맞는 구성품을 만들어서 할 수 있을 것이다.<td is="car-component">그런 다음 TD를 3개의 열처럼 보이도록 스타일링하십시오.

참조URL: https://stackoverflow.com/questions/47872764/looping-a-block-of-code-in-ie-11