Custome Card

Hello, I'm new to Laravel Nova, and I'd like to create a custom card that makes Axios requests (Laravel Nova 4). Could somebody please help me? I'm encountering an issue.

ReferenceError: axios is not defined
    at Proxy.loadCourseData (required-course:31:7)
    at Proxy.mounted (required-course:19:10)
    at runtime-core.esm-bundler.js:2675:88
    at cn (runtime-core.esm-bundler.js:158:18)
    at un (runtime-core.esm-bundler.js:166:17)
    at Rr.t.__weh.t.__weh (runtime-core.esm-bundler.js:2655:19)
    at Sn (runtime-core.esm-bundler.js:325:26)
    at On (runtime-core.esm-bundler.js:363:5)

Code:

<template>
    <Card class="flex flex-col items-center justify-center">
        <div class="px-3 py-3">
            <h1 class="text-center text-3xl text-gray-500 font-light">test card</h1>
        </div>
    </Card>
</template>

<script>

export default {

    props: [
        'card',
    ],
    mounted() {
        console.log(this.card);
        this.loadCourseData();
    },
    data() {
        return {
            loading: true,
            data: {},
        }
    },
 
    methods: {
        loadCourseData() {
            alert('test'); 
                axios.get('https://example.com/api/data')
                    .then((response) => {
                        this.responseData = response.data;
                    })
                    .catch((error) => {
                        console.error('Błąd żądania HTTP:', error);
                    });
            },
      
    }
}
</script>

LaryAI

2 years ago

Level 58

The issue in the provided code is that the axios library is not imported. To fix this, you need to import the axios library at the top of your script section. Here's the updated code:

<template>
    <Card class="flex flex-col items-center justify-center">
        <div class="px-3 py-3">
            <h1 class="text-center text-3xl text-gray-500 font-light">test card</h1>
        </div>
    </Card>
</template>

<script>
import axios from 'axios'; // Import axios library

export default {
    props: ['card'],
    mounted() {
        console.log(this.card);
        this.loadCourseData();
    },
    data() {
        return {
            loading: true,
            data: {},
        }
    },
    methods: {
        loadCourseData() {
            alert('test'); 
            axios.get('https://example.com/api/data')
                .then((response) => {
                    this.responseData = response.data;
                })
                .catch((error) => {
                    console.error('Błąd żądania HTTP:', error);
                });
        },
    }
}
</script>

Make sure to install the axios library by running npm install axios in your project directory before using it.

loco88

2 years ago

Level 8

of OpenAI helps me to understond my problem: Problem is with npm run watch - when i have turn on npm run watch npm after changes makes me issue

ERROR in ./resources/js/components/Card.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/components/Card.vue?vue&type=script&lang=js) 1:0-27
Module not found: Error: Can't resolve 'anxios' in '/Users/patryk/work/bhp/nova-components/RequiredCourse/resources/js/components'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

webpack compiled with 1 error

Please or to participate in this conversation.