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与刀片

1 个答案: