Why is vue not displaying title and icon?

V

Vladislava2022-01-07 20:13:57

Vue.js

Vladislava, 2022-01-07 20:13:57

Why doesn't Vue js render the icon and title specified in tabs?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://cdn.tailwindcss.com"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter Clone</title>
</head>
<body>
    <div id="app" class="flex container h-screen v-full">
        <div class="lg:w-1/5 border-r border-lighter lg:px-8 py-2">
            <button class="h-12 w-12 hover:bg-lightblue text-3xl text-blue rounded-full">
                <i class="fab fa-twitter"></i>
            </button>
        
        <div>
            <button v-for="tab in tabs" class="hover:text-blue flex items-center px-4 py-2 hover:bg-lightblue rounded-full mr-auto">
                <i :class="`${ tab.icon } text-2xl mr-4 text-left`"></i>
                <p class="text-lg font-semibold text-left"> {{ tab.title }}</p>
            </button>
        </div>
        </div>

    </div>

    <script href="main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</body>
</html>

JS

new Vue({
    el: '#app',
    data(){
        return {
            tabs: [
                {icon: 'fas fa-home', title: 'Home', id:'home'},
                {icon: 'fas fa-hashtag', title: 'Explore', id: 'explore'},
                {icon: 'far fa-bell', title: 'Notifications', id: 'notifications'},
                {icon: 'far fa-envelope', title: 'Messages', id: 'messages'},
                {icon: 'far fa-bookmark', title: 'Bookmarks', id: 'bookmarks'},
                {icon: 'fas fa-clipboard-list', title: 'Lists', id: 'lists'},
                {icon: 'far fa-user', title: 'Profile', id: 'profile'},
                {icon: 'fas fa-ellipsis-h', title: 'More', id: 'more'}
              ],
        }
    }
})

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

MentalControl, 2022-01-07
@vladis005

Try including main.js after vue