Vuejs 2のテンプレートを2回表示するIEとSafariのラベラをブレードで使用する

Question

オートコンプリートコンポーネントを作成しましたが、IEやSafariではうまく動作しません。

IEとSafariでテンプレートを2回表示します。それは動作しますが、レンダリングされたHTMLに加えてテンプレートも表示されます。イメージを参照してください。

どうしたのですか？

<div id="main"> 
    <autocomplete></autocomplete> 
</div> 

<template id="autocomplete"> 
    <div> 
     <div class="col"> 
      <section class="box clr1"> 
       <div> 
        <div> 
         <input type="text" placeholder="Welk product zoekt U?" v-model="query" v-on:keyup="autoComplete" class="form-control"> 
         <div class="panel-footer" v-if="results.length"> 
          <ul class="list-group"> 
           <li class="list-group-item" v-for="result in results"> 
            <span style="text-decoration: underline;cursor:pointer" v-on:click="showDetail(result.id)">@{{ result.title }}</span>... 

     <div class="col"> 
      <section class="box clr1"> 
       <div> 
        <div v-for="detail in resultdetail"> 
         <h1>@{{ detail.title }}</h1> 
         <h2>@{{ detail.page_title }}</h2> 
         <p v-html="detail.description"></p>... 


Vue.component('autocomplete', { 
     template: '#autocomplete', 
     data: function() { 
      return { 
       show: false, 
       query: '', 
       results: [], 
       resultdetail: [] 
      } 
     }, 
     methods: { 
      autoComplete: function() { 
       this.results = []; 
       if (this.query.length > 1) { 
        axios.get('/getproductjson/' + this.query + '/0') 
         .then(function (response) { 
          this.results = response.data 
         }.bind(this))... 
      showDetail: function (productId) { 
       if (productId > 0) { 

        this.show = true; 
        this.resultdetail = []; 
        axios.get('/getproductjson/loremipsumdipsum/'+productId) 
         .then(function (response) { 
          this.resultdetail = response.data 
         }.bind(this))... 
     } 
    }); 
    new Vue({ 
     el: '#main' 
    }); 

結果：

Answer 1

インターネットエクスプローラdoes not supporttemplateタグ。

Internet Explorerに表示されているものは、インスタンス化されたVueです。IEはtemplateを実装していないため、テンプレートを画面に表示するだけです。

DOMにテンプレートを保存する場合は、通常、スクリプトテンプレートを使用する必要があります。

<script type="text/x-template" id="autocomplete"> 
    ... 
</script>