Vuejs 2显示模板两次IE和Safari刀片使用刀片

Question

我制作了一个自动完成组件，它在Chrome中运行良好，但在IE和Safari中无法运行。

它在IE和Safari中显示模板两次。它可以工作，但它显示了除了呈现的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

Internet Explorer的does not support的template标签。

您在Internet Explorer中看到的是您实例化的Vue，并且由于IE不执行template，它只是在屏幕上显示您的模板。

在IE中，如果要将模板存储在DOM中，通常必须使用脚本模板。

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