当我在vue.js中使用v-if属性时，发生了错误

Question

在VUE中，我定义了组件消息，代码是下一个：

<template>
    <div class="j-message" v-if="show">
        <Icon :type="newType"/>
        <span class="message">
            <slot></slot>
        </span>
    </div>
</template>
<style lang="less" rel="stylesheet/less">
    @border: #e9e9e9;
    @messagefontcolor: #666;
    .j-message {
        padding: 8px 16px;
        border: 1px solid @border;
        border-radius: 4px;
        display: inline-block;
        position: fixed;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        top: 50px;
        font-size: 12px;
        color: @messagefontcolor;
        box-shadow: 2px 2px 2px @border, -1px 0px 1px @border;
        animation: messagedisplay .2s linear;
        .message {
            margin-left: 5px;
        }
    }
    @keyframes messagedisplay {
        0% {
            opacity: 0;
            transform: translate3d(-50%, -20px, 0);
        }
        100% {
            opacity: 1;
            transform: translate3d(-50%, 0, 0);
        }
    }
</style>
<script type="text/ecmascript-6">
    import Icon from '../icon/icon.vue'
    export default {
        data() {
            return {
                show: true
            }
        },
        computed: {
            newType: function () {
                return this.type ? this.type : "prompt"
            },
            time: function() {
                if(this.duration) {
                    return this.duration * 1000;
                }
                return 1500;
            }
        },
        components:{
            "Icon": Icon
        },
        props: {
            type: String,
        },
        mounted() {
            console.log(123)
            setTimeout(() => {
                console.log(345)
                this.show = false
            }, this.time)
        }
    }
</script>

我定义了组件图标这样：

<template>
    <i class="jicon" :class="'jicon-' + type"></i>
</template>
<style lang="less" rel="stylesheet/less">
    @default: #1f90e6;
    @success: #89ce6d;
    @fail: #fc561f;
    @warning: #fda929;
    .jicon {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
    .jicon-forward {
        float: right;
        margin-top: 1px;
        margin-left: 1px;
        &:before {
            content: "e601";
        }
    }
    .jicon-prompt {
        color: @default;
        &:before { content: "e620"; }
    }
    .jicon-success {
        color: @success;
        &:before { content: "e63a"; }
    }
    .jicon-fail {
        color: @fail;
        &:before { content: "e613"; }
    }
    .jicon-warning {
        color: @warning;
        &:before { content: "e6d4"; }
    }
    .jicon-search:before { content: "e600"; }
    .jicon-backward:before { content: "e60a"; }
    @font-face {
        font-family: 'iconfont';  /* project id："191439" */
        src: url('//at.alicdn.com/t/font_t6inlill5jzl4n29.eot');
        src: url('//at.alicdn.com/t/font_t6inlill5jzl4n29.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_t6inlill5jzl4n29.woff') format('woff'),
        url('//at.alicdn.com/t/font_t6inlill5jzl4n29.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_t6inlill5jzl4n29.svg#iconfont') format('svg');
    }
</style>
<script>
    export default{
        data(){
        },
        components:{},
        props: {
            type: String
        }
    }
</script>

但是，当创建组件时，显示为false，但控制台报告了错误

vue.min.js：6个未定义的（在承诺中）typeerror：无法读取属性' ob 'd.e. a.e.

错误是什么？

Answer 1

尝试使用小写元素作为图标元素：

<icon :type="newType"></icon>

编辑

我将下面放在一起，它可以按预期工作：

const Icon = {
	template: `
    	<div>
    		<i class="jicon" :class="'jicon-' + type"></i>
            <div>type: {{ type }}</div>
       	</div>
    `,
    props: {
        type: String
    }
}
new Vue({
    el: '#app',
    data() {
        return {
            show: true
        }
    },
    computed: {
        newType: function() {
            return this.type ? this.type : "prompt"
        },
        time: function() {
            if (this.duration) {
                return this.duration * 1000;
            }
            return 1500;
        }
    },
    components: {
        Icon
    },
    props: {
        type: String,
    },
    mounted() {
        console.log(123)
        setTimeout(() => {
            console.log(345)
            this.show = false
        }, this.time)
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    <div class="j-message" v-if="show">
        <icon :type="newType"></icon>
        <span class="message">
            <slot></slot>
        </span>
        <div>show: {{ show }}</div>
    </div>
</div>

希望有帮助...