[Vuejs]-An error occurred when I used the V-IF attribute when in Vue.js

by

0👍

✅

try using lowercase for the icon element:

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

EDIT

I put the below together and it works as expected:

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>

hope that helps …

Leave a comment