hjortur17
2 months ago
204
3
Vue

Vue not rendering

Posted 2 months ago by hjortur17

I can't figure out why I'm not seeing anything on the screen. There is no error messages in the console or in the browser. If I look in the app.js file through the web browser I see some of the stuff I'm doing in my component but I do not see the component itself.


require('./bootstrap');

window.Vue = require('vue');

Vue.component('santa', require('./components/SantaComponent.vue').default);

const app = new Vue({
    el: '#app',
});
<template>
    <div class="container mx-auto max-w-5xl px-6 md:px-0 mb-16">
        <section id="todaySanta" class="my-16">
            <div class="w-full" v-for="(items, santa) in santas">
                <div v-if="isNext(items.date_on_arrival)">
                    <h2 class="text-5xl font-bold text-center mb-8">{{ items.name }} kemur í kvöld</h2>
                    
                    <div class="flex">
                        <div class="w-64">
                            <img :src="items.link_to_image">
                        </div>
                        <div class="flex-1 self-center px-4">
                            <p class="text-lg leading-relaxed" v-text="items.description"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="w-full flex justify-between">
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Næstu jólasveinar</p>
                <p class="uppercase text-xs text-gray-500 mb-2 select-none">Í dag er: <span v-text="todayFormated"></span></p>
            </div>


            <div class="shadow rounded-lg p-12">
                <div class="w-full" v-for="(items, santa) in santas">
                    <div class="flex flex-col" v-if="isAfter(items.date_on_arrival)">
                        <div class="w-full flex">
                            <div class="w-32 h-32">
                                <img :src="items.link_to_image" class="max-h-full mx-auto">
                            </div>
                            
                            <div class="flex-1 self-center px-4">
                                <h2 class="text-xl font-bold mb-2" v-text="items.name"></h2>
                                <p class="text-sm" v-text="items.description"></p>  
                            </div>
                        </div>
                    </div>

                    <hr class="border my-8">
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
    data() {
        return {
            today: dayjs(),
            todayFormated: dayjs().format('DD/MM/YYYY'),
            // today: dayjs().subtract(5, 'days').add(2, 'months'),  USE THIS IF YOU NEED TO IF THE METHODS WORKS

            santas: [],
        }
    },

    methods: {
        getSantas() {
            axios.get('/jólasveinar/sækja')
            .then(response => {
                this.santas = response.data.map(santas => santas);
            });
        },

        isPassed(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isBefore(this.today);
        },

        isNext(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear).millisecond(1);

            return dayjs(tempDate).isSame(dayjs(this.today).millisecond(1));
        },

        isAfter(date) {
            let tempYear = dayjs().get('year');
            let tempDate = dayjs().date(date).month(11).year(tempYear);

            return dayjs(tempDate).isAfter(dayjs(this.today).add(1,'day'));
        }
    },

    mounted() {
        this.getSantas();
    }
};
</script>
<!DOCTYPE html>
<html lang="is">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Jólavefurinn</title>

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    @include ('partials.navbar')
    
    @yield ('header')

    <div id="app" class="py-24">
        <div class="container mx-auto max-w-6xl px-6 md:px-0 flex">
            <main class="w-4/6">
                @yield ('first-section')
            </main>
            <aside class="w-2/6 pl-10">
                <div class="w-full h-auto bg-gray-300">
                    hi
                </div>
            </aside>
        </div>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "dayjs": "^1.8.16",
        "lodash": "^4.17.15",
        "tailwindcss": "^1.1.2"
    }
}

Please sign in or create an account to participate in this conversation.