IE 11でコードブロックをループする

Question

プロジェクトでは、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デベロッパーチームに連絡した後、彼らは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はテンプレート用に1つのルート要素しか持つことができません。解決策は、1つのルート要素があるまで、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：私はこれを反映するjsfiddleを更新しました

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

。

Answer 2

EDIT：これは読まないでください、それはVue 1のためだけです！

私はあなたがこれを現在行うことができるとは思わない。 IEではテンプレートタグが許可されていないため、<tr is="component-name">を使用し、trまたはtdに適用できる個別のコンポーネント（単一のルート要素を持つ）があります。各要素をループし、3を追加すると、tdは実行できません。

また、trまたはtdの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と書くこともできます。

​​