Glitter Grace

Member Since 3 Months Ago

Experience Points
620
Total
Experience

4,380 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed
0
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

  • Community Pillar

    Earned once your experience points ranks in the top 10 of all Laracasts users.

Level 1
620 XP
Mar
10
1 month ago
Activity icon

Started a new Conversation How To Solve The Avoid Mutating A Prop

I'm trying to compare prices from last year and this year and the problem I'm getting is this

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

I understand what it's saying but I'm not sure how to solve it.

Here is my code

<template>
    <div class="content-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-2">
                                <div class="col-sm-12">
                                    <label for="year_select">Select Year</label>
                                    <select id="year_select" @change="getYearComparison()" class="form-control" style="width: 100%;" v-model="yearSelect">
                                        <option v-for="year in years" :value="year.id">
                                            {{ year.year }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <table class="table">
                                                        <thead>
                                                            <tr class="text-center">
                                                                <th colspan="4" style="border-right: #dee2e6 solid 1px">
                                                                    Previous Year
                                                                </th>
                                                                <th colspan="3" style="border-right: #dee2e6 solid 1px">
                                                                    This year
                                                                </th>
                                                                <th colspan="2">
                                                                    Variance
                                                                </th>
                                                            </tr>
                                                        </thead>

                                                        <tr v-for="c in compare">
                                                            <td>
                                                                {{ c.prev_price }}
                                                            </td>

                                                            <td>
                                                                {{ c.curr_price }}
                                                            </td>

                                                            <td style="border-right: #dee2e6 solid 1px">
                                                                {{ c.v_price }}
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['compare'],
        data(){
            return {
               years: [],
               tariffSelect: null
            }
        },
        computed: {

        },
        methods: {
            getYears(){
                axios.get('/api/years/getYears').then(response => {
                    this.years = response.data.years;
                });
            },
            getYearComparison(){
                axios.get(`/api/product/${this.tariffSelect}/comparison`).then(response => {
                    this.compare = response.data.compare;
                })
            }

        },
        mounted(){
            this.getYears();
        }
    }
</script>
Activity icon

Replied to Getting My Vue Select To Display The Correct Option

Thank you so much. I didn't know you could do that

Activity icon

Started a new Conversation Getting My Vue Select To Display The Correct Option

I have a vue page and when the page loads I would like it to select the correct category option based on what my product's category id is, but at the moment that isn't happening and I'm not sure where I've gone wrong.

Here is my code

    <template>
        <div class="content-header">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="card">
                            <div class="card-body">
                                <div class="row mb-2">
                                    <div class="col-sm-12">
                                        <label for="category_select">Select category</label>
                                        <select id="category_select" class="form-control" style="width: 100%;" v-model="categorySelect">
                                            <option v-for="category in categories" :value="category.id" :selected="category.id === product[0]['category_id']">
                                                {{ category.name }}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        export default {
            props: ['product'],
            data(){
                return {
                    categories: [],
                    categorySelect: null
                }
            },
            computed: {

            },
            methods: {
                getCategories(){
                    axios.get('/api/categories/getCategories').then(response => {
                        this.categories = response.data.categories;
                    });
                },

            },
            mounted(){
                this.getCategories();
            }
        }
    </script>
Feb
25
1 month ago
Activity icon

Replied to How To Automatically Add A Row Number

That didn't work. I ended up getting product_11 and product_21 just in case my product array looks like this

'product_1' => [
    'name' => 'Product 1',
],
'product_2' => [
    'name' => 'Product 2',
],
'product_3' => [
    'name' => 'Product 3',
]
Activity icon

Started a new Conversation How To Automatically Add A Row Number

I have a page where I'm looping and for every product that I have and what I would like is for a count of the rows that I have.

So for example if I have 3 rows then I would like this

<tbody>
    <tr>
        <td> 1 </td>
        <td> Product 1 </td>
    </tr>

    <tr>
        <td> 2 </td>
        <td> Product 2 </td>
    </tr>

    <tr>
        <td> 3 </td>
        <td> Product 3 </td>
    </tr>
</tbody>

and if I have 2 rows then I will have

<tbody>
    <tr>
        <td> 1 </td>
        <td> Product 1 </td>
    </tr>

    <tr>
        <td> 2 </td>
        <td> Product 2 </td>
    </tr>
</tbody>

Here is my code

<template>
    <div class="content-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Row number</th>
                                                <th>Name</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr v-for="product in products" >
                                                <td> </td>
                                                <td>{{ product.name }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    props: [],
    data(){
        return {
            products: []
        }
    },
    methods: {
        getProducts(){
            axios.get(`/api/products`).then(response => {
                this.products = response.data.products;
            });
        },
    },
    mounted() {
        this.getProducts();
    }
}
</script>

Activity icon

Replied to Calculating Subtotal

calculateAmount() is supposed to calculate the amount of units x the price of the product and subTotal() is supposed to calculate all the products total at the end.

Activity icon

Started a new Conversation Calculating Subtotal

I have a page that is supposed to calculate the total amount of items in a cart. The problem I'm having is that I'm not sure how to add it.

Here is my code

<template>
    <div class="content-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Unit</th>
                                                <th>Price</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr v-for="product in products">
                                                <td>{{ product['name'] }}</td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="product_unit">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="product_price">
                                                </td>
                                                <td>
                                                    {{ calculateAmount }}
                                                </td>
                                            </tr>

                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td>
                                                    Subtotal: {{ subTotal }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    props: [],
    data(){
        return {
            products: [],
            product_unit: null,
            product_price: null,
        }
    },
    computed:{
        calculateAmount(){
            return this.product_unit * this.product_price;
        },
        subTotal(){
            return sum(this.calculateAmount);
        }
    },
    methods: {
        getProducts(){
            axios.get(`/api/product/all`).then(response => {
               this.products = response.data.products;
            });
        }
    },
    mounted() {
        this. getProducts();
    }
}
</script>
Jan
15
3 months ago
Activity icon

Started a new Conversation Getting The Difference Between 2 Arrays

I need to compare 2 arrays together and I need to find out what is missing from the one array.

For example

Array 1

[
    Product 1,
    Product 2,
    Product 3,
    Product 4,
    Product 5,
]

Array 2

[
    Product 1,
    Product 2,
    Product 3,
]

and what I need is to be able to do is compare the 2 arrays and find out what in array 1 isn't in array 2, so I would like my output to be something like this

Array 3

[
    Product 4,
    Product 5,
]
Jan
08
3 months ago
Activity icon

Replied to Trying To Get Property 'role' Of Non-object

I don't know if it will help but I'm also using vue

Activity icon

Replied to Trying To Get Property 'role' Of Non-object

I'm getting Unauthenticated in my Network tab in the dev tools

Activity icon

Started a new Conversation Trying To Get Property 'role' Of Non-object

I'm trying to create a middleware that checks if the user is an admin or not, the problem I'm having is that I'm getting this error.

Trying to get property 'role' of non-object

So what I'm doing is that I try to access a route that only belongs to the admin without logging in and then I get the above error instead of the 403

Here is my middleware

public function handle(Request $request, Closure $next)
{
    if(Auth::user()->role == 'admin' && !empty(Auth::user()))
    {
        return $next($request);
    }else{
        abort(403);
    }
}
Jan
07
3 months ago
Activity icon

Awarded Best Reply on Getting My Jetstream To Go To Different Routes Based On User Role

I finally manged to figure out what my problem was. When I was testing I was already logged in and that was why I didn't see my dd() I had to log out and then log back in to be able to see it.

Activity icon

Replied to Getting My Jetstream To Go To Different Routes Based On User Role

I finally manged to figure out what my problem was. When I was testing I was already logged in and that was why I didn't see my dd() I had to log out and then log back in to be able to see it.

Activity icon

Started a new Conversation Getting My Jetstream To Go To Different Routes Based On User Role

I'm trying to create a login that if the user is an admin then they will go to an admin route and if it's a customer they will go to the customer route.

I saw that @Snapey had something for this and I don't know if maybe I misunderstood it.

The link to it is https://talltips.novate.co.uk/laravel/laravel-8-conditional-login-redirects

What I'm having a problem is when I get to my App/Http/Responses/LoginResponse.php and I go into the toResponse() method, I then dd(Auth::user()) just to confirm that the user is being sent through, but nothing happens I don't get the user object, I only get the jetstream dashboard page.

I also tried doing php artisan cache:clear and php artisan config:clear just incase

Just so people can see if maybe I did anything wrong here is my code

My LoginResponse.php

<?php

namespace App\Http\Responses;

use Laravel\Fortify\Contracts\LoginResponse as LoginResponseContract;

class LoginResponse implements LoginResponseContract
{
    /**
     * Create an HTTP response that represents the object.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Symfony\Component\HttpFoundation\Response
     */
    public function toResponse($request)
    {
        dd(Auth::user());
    }
}

and my JetstreamServiceProvider

<?php

namespace App\Providers;

use App\Actions\Jetstream\DeleteUser;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->configurePermissions();

        Jetstream::deleteUsersUsing(DeleteUser::class);

        $this->app->singleton(
            \Laravel\Fortify\Contracts\LoginResponse::class,
            \App\Http\Responses\LoginResponse::class,
        );
    }

    /**
     * Configure the permissions that are available within the application.
     *
     * @return void
     */
    protected function configurePermissions()
    {
        Jetstream::defaultApiTokenPermissions(['read']);

        Jetstream::permissions([
            'create',
            'read',
            'update',
            'delete',
        ]);
    }
}
Activity icon

Started a new Conversation Pushing Data To An Array In Vue

I'm trying to push some data to an array, but when I console.log(test) I don't have anything that shows up in my console.log().

Here is my code

let test = [];

for(var i = 0; i < data.chart.length; i++){
    test[i] = MG.convert.date(data.chart[i], 'date');
}

console.log('test', test);
Activity icon

Replied to Not Able To Submit Question

Thanks for the reply. I've just posted a question now.

Activity icon

Started a new Conversation Data Not Showing In My Console.log In Vue

In my vue app I have 2 methods, one method gets some data from my laravel backend and the second one needs to be able to grab it so that I can use it in that method. What I'm struggling with is that the second method isn't grabbing the data.

Here is my code

    <template>
        <app-layout>
            <div class="content-wrapper" style="margin-left: 0;">
                <div class="content">
                    <div class="container">
                        <div class="row pt-5">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                Some data will show here
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </app-layout>
    </template>

    <script>
    import AppLayout from '@/Layouts/AppLayout'
    export default {
        components: {
            AppLayout,
        },
        data() {
            return {
                testData: ''
            }
        },
        methods: {
            firstMethod() {
                axios.get('/api/get-data').then(response => {
                    this.testData = response.data;
                });
            },
            secondMethod(){
                console.log(this.testData);
            }
        },
        mounted() {
            this.firstMethod();
            this.secondMethod();
        }
    }
    </script>
Jan
06
3 months ago
Activity icon

Started a new Conversation Not Able To Submit Question

I'm trying to submit a question, but I keep getting this error that sounds something like this

Not allowed to submit links on my first day

but the thing is my post didn't have any links