Vuejs 2 显示模板两次 IE 和 Safari laravel with blade

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>

Vuejs 2 显示模板两次 IE 和 Safari laravel with blade

Vuejs 2 display template twice IE and Safari laravel with blade

blade

laravel-5

vuejs2