piljac1

piljac1

Full stack web developer at Tollé

Member Since 1 Year Ago

Mascouche, QC (Canada)

Experience Points
54,030
Total
Experience

970 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
76
Lessons
Completed
Best Reply Awards
71
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.

Level 11
54,030 XP
Oct
26
1 day ago
Activity icon

Replied to Component Not Rendering With A Conditional

Our team is still on Laravel 6.x, so I haven't tested the 7+ syntax, but I have found this issue where a Laravel member said they do not support the syntax you used in your examples. However, it's a couple of months old so I don't know if it's still relevant.

Can't you do the following?

<x-custom-select :model="$subTypes" wire="selectedSubType" label="Sub-Tipo" class="w-1/2" :disabled="$hasSubType" />

In other cases where you toggle between two strings based on a boolean (not necessary in your case, but just putting it out there), the following can probably be done (I'd assume it would work because the syntax is a lot Vue'ish):

<x-my-component :variable="$booleanVar ? 'true string' : 'false string'" />
Activity icon

Awarded Best Reply on How To Update Props From Parent?

I think your workflow is flawed (half of your logic is root based and half is component based), but if you want to keep it as is, I would suggest that you add another props and set a watcher on it. When it changes, push the new content to the local variable of your table component. An other alternative would be to use Vuex.

You could also setup a v-model like you suggested if you want two-way binding (which would not happen with the props/watcher alternative).

Activity icon

Replied to How To Update Props From Parent?

Correct, this change won't solve your issue, it will just make your workflow cleaner.

Activity icon

Replied to How To Update Props From Parent?

Same with your mixin. It is supposed to be used to avoid code duplication, but if you need it only once, it's overkill and not necessary (might not be the case for you. because you might have use for it in multiple components, but if you don't, it is not necessary).

Activity icon

Replied to How To Update Props From Parent?

Yes you need to create a Vue instance somewhere, else well... Vue will simply not work lol. But what I mean is that you also bound a method on your root Vue instance that might not have uses for all of your components. You're probably working on a form that will happen on a single page (or a few), so I would move that logic one level down in a component.

Activity icon

Replied to Using Index In Vue Computed Properties?

@chrisgrim Not if you want to use your loop index.

Activity icon

Replied to Using Index In Vue Computed Properties?

@chrisgrim Have you moved your shift computed function to the methods object ?

Activity icon

Replied to How To Update Props From Parent?

I think your workflow is flawed (half of your logic is root based and half is component based), but if you want to keep it as is, I would suggest that you add another props and set a watcher on it. When it changes, push the new content to the local variable of your table component. An other alternative would be to use Vuex.

You could also setup a v-model like you suggested if you want two-way binding (which would not happen with the props/watcher alternative).

Activity icon

Replied to How To Update Props From Parent?

Can you post more code please ? Also it seems you're mixing Vue into Blade files and that $data is a PHP variable. If that's the case, it means that the contentrows props is not bound to a reactive property, so I don't think what you're trying to achieve would work with plain Vue (or at all).

Activity icon

Replied to Using Index In Vue Computed Properties?

I don't have much time as of now to think about another possible approach because I'm at work and just waiting for an import script to finish in a couple of seconds, but to answer your first question, you can use a method instead of a computed property and pass the index as a parameter: :class="shift(index)".

Activity icon

Replied to Websockets And Vue: I Need To Update Feed

Assuming that your Pusher and Laravel Echo setup is correct (using window.Echo = ...: see Installing Laravel Echo) and that your event is in the App\Events namespace, you should be able to do the following:

mounted() {
  Echo.channel('bids')
    .listen('YourEvent', (e) => {
      this.bids = e.bids;
    });
}

You can also extract that code and put it in a method if you'd like.

Side note: you should probably have a channel for each auction.

Activity icon

Replied to When To Use Window?

@sinnbeck To add to your number 3, not using a Vue mixin makes it usable in all JS contexts.

Oct
21
6 days ago
Activity icon

Awarded Best Reply on Query With Filter On Child Tables

@raulmercadox Not sure this is what you meant but try this and let me know (you must have a belongsTo stage relationship defined in your Order model for this to work) :

Order::whereHas('stage', function ($query) {
    $query->where('phase', 2);
})->get();

If phase is a string, just wrap the 2 in single quotes.

Oct
14
1 week ago
Activity icon

Awarded Best Reply on Prevent White Space In The Input Not Working

I've already encountered issues when using patterns, but I believe it was when matching a pattern with the number type and only on some mobile devices. In your case, it shouldn't be an issue imo.

If it is (or becomes) one, you can simply handle input suppression with Vue using v-model and a watcher. After the v-model sets the data property, the watcher is triggered and cleanup can be made (all this process is not visible to the end user, it feels the same as a keydown suppression).

watch: {
  username(value) {
    this.username = value.replace(/ +/g, '');
  }
}

You can complexify the regex pattern to reach the desired validation.

Activity icon

Replied to Prevent White Space In The Input Not Working

I've already encountered issues when using patterns, but I believe it was when matching a pattern with the number type and only on some mobile devices. In your case, it shouldn't be an issue imo.

If it is (or becomes) one, you can simply handle input suppression with Vue using v-model and a watcher. After the v-model sets the data property, the watcher is triggered and cleanup can be made (all this process is not visible to the end user, it feels the same as a keydown suppression).

watch: {
  username(value) {
    this.username = value.replace(/ +/g, '');
  }
}

You can complexify the regex pattern to reach the desired validation.

Oct
13
2 weeks ago
Activity icon

Replied to Leaderboard Rewards

Oh and I just thought about that. Wouldn't it be nice to be able to pick what badges you want show (with a limit of course)? I don't think it is possible as of now.

Activity icon

Replied to Leaderboard Rewards

Btw @snapey I like your seasonal leaderboard idea!

Activity icon

Replied to Leaderboard Rewards

Adding to the suggestions that have been placed, it would be nice to have the posts/replies count viewable somewhere. I feel like this is pretty much standard on every forums and it could benefit to the "Chatty Cathy" badge which has no visible metric compared to all other badges.

Activity icon

Replied to Selected Option Is Blank?

Can you post your full code ? Because I see you have a v-model that is set on your select tag, as well as a selected property on your options. In Vue, you should never use the selected property.

Activity icon

Awarded Best Reply on How To Change Select Button Color Based On Selection??

Interacting with select tags in Vue is not the same as with regular HTML/JavaScript. You need to declare a data property which will contain the currently selected value. Based on that value, you can fetch the color of the element matching it.

Here's a pen example that I made to help you understand.

Activity icon

Replied to Nuxt Store Not Updating

What debug steps have you taken so far? Did you check if response.result is empty?

Oct
12
2 weeks ago
Activity icon

Replied to How To Couple .vue Data With Blade?

You could create a wrapper component which receives the data and pass it as props to other children.

Activity icon

Replied to How To Change Select Button Color Based On Selection??

Interacting with select tags in Vue is not the same as with regular HTML/JavaScript. You need to declare a data property which will contain the currently selected value. Based on that value, you can fetch the color of the element matching it.

Here's a pen example that I made to help you understand.

Sep
27
1 month ago
Activity icon

Awarded Best Reply on How To Make V-for Display 10 Items At A Time

What @tray2 suggested is the ideal solution, especially for a huge amount of data. That being said, with only 60 records, it won't make much of a difference.

If you don't want to convert to multiple AJAX requests, you could simply add an offset data property and increment by 10 both the offset and your current perpage property in the next method (and decrement them by 10 in the previous method). You would also have to update your condition to work with the offset property.

Start your offset at 1 and your perpage at 10. So on page load, you'll get questions 1 to 10, then 11 to 20, then 21 to 30 and so on.

Activity icon

Replied to DigitalOcean Newbie Questions

Not sure what you mean by "a specific domain name from Digital Ocean", but you can absolutely buy a domain name elsewhere and link it to your droplet's IP. Else, you can access your IP directly by the time you get a domain name.

Activity icon

Replied to How To Make V-for Display 10 Items At A Time

What @tray2 suggested is the ideal solution, especially for a huge amount of data. That being said, with only 60 records, it won't make much of a difference.

If you don't want to convert to multiple AJAX requests, you could simply add an offset data property and increment by 10 both the offset and your current perpage property in the next method (and decrement them by 10 in the previous method). You would also have to update your condition to work with the offset property.

Start your offset at 1 and your perpage at 10. So on page load, you'll get questions 1 to 10, then 11 to 20, then 21 to 30 and so on.

Sep
26
1 month ago
Activity icon

Replied to How To Hide Button If Status Is 1 And Hide If Status 0?

You keep copy/pasting the almost same code over and over again when your issue is probably at a higher level. Can you post all code related to the news object (including your APi logic, etc.).

Can you also post the JSON version of news after it got affected ? Here's the code to use to generate a readable JSON output:

JSON.stringify(this.news, undefined, 4);
Sep
25
1 month ago
Activity icon

Replied to How To Hide Button If Status Is 1 And Hide If Status 0?

Be sure to add the status property to your news object on data declaration, else it won't be reactive. So even if you change its value, Vue won't re-render the DOM.

data() {
  return {
    news: {
      status: 0
    }
  }
}
Activity icon

Replied to How To Update Status Using Vue?

Try adding a / in front of your routes in your Vue ('/api/news-post/'+id and '/api/news-unpost/'+id).

Your Vue component is probably rendered in a route which is not the root route (/). For example, if your URL is currently website.com/news, your current axios calls will reach to website.com/news/api/news-unpost/{id} instead of website.com/api/news-unpost/{id}.

Side note: Your route declarations should use a capitalized Route class (instead of route). Otherwise, it will throw an error on Unix based systems.

Sep
24
1 month ago
Activity icon

Replied to Error Cannot Read Property 'name' Of Undefined

You have not defined errors as a prop or data property in your view model.

Sep
23
1 month ago
Activity icon

Replied to Module Not Found: Error: Can't Resolve ' Vuejs

The code you posted doesn't seem to be the culprit. Where are you importing/requiring you navigation drawer ? If you're on Mac/Linux, you're probably encountering a case issue (you're importing Navigationdrawer and not NavigationDrawer). That's my guess.

Sep
21
1 month ago
Activity icon

Awarded Best Reply on Is There A Way To Save A Query?

You could store your builder in a variable and use it in both of your cases

$searchedEventsQuery = Event::search('a')
    ->rule(EventMapSearchRule::class)
    ->with(['location', 'organizer', 'category', 'genres']);

$max = $searchedEventsQuery
    ->get()
    ->pluck('priceranges')
    ->flatten()
    ->pluck('price')
    ->max();

$searchedEvents = $searchedEventsQuery->paginate(8);
Activity icon

Replied to Is There A Way To Save A Query?

Nvm, you were quicker than me haha

Activity icon

Replied to Is There A Way To Save A Query?

You could store your builder in a variable and use it in both of your cases

$searchedEventsQuery = Event::search('a')
    ->rule(EventMapSearchRule::class)
    ->with(['location', 'organizer', 'category', 'genres']);

$max = $searchedEventsQuery
    ->get()
    ->pluck('priceranges')
    ->flatten()
    ->pluck('price')
    ->max();

$searchedEvents = $searchedEventsQuery->paginate(8);
Sep
17
1 month ago
Activity icon

Replied to Data And Props Naming Conflicts

It's a good question you have there. I personally haven't settled for a given prefix or suffix, but I normally find a more specific variation for the data properties. For example, if my prop is field, I would name it formField in the data section, if the prop user represent the authenticated user, I would use authUser and so on.

Sep
12
1 month ago
Activity icon

Replied to Server Side Vuetify

Post your entire code please, I can't help you with sprinkles.

Activity icon

Replied to Server Side Vuetify

Where are you using getDesserts ? Because you're returning this.dataCategories when you have an Axios call right before. Since JS is asynchronous, your return statement will be executed before your then closure, which means this.dataCategories doesn't contain the desired value (undefined for the first call, previous content for subsequent calls).

Sep
04
1 month ago
Activity icon

Awarded Best Reply on Open Method In Parent Component From Child Component

You're passing :login="openLogForm" to your slot and you're calling layout.openLogForm in your child component.

You should either be calling layout.login() in your child component or change your slot param to :openLogForm="openLogForm".

Also, I'm pretty sure there's no Vue magic to make your layout variable available in your entire component. So you will probably have to pass it to your functions as a parameter.

Activity icon

Replied to Open Method In Parent Component From Child Component

You're passing :login="openLogForm" to your slot and you're calling layout.openLogForm in your child component.

You should either be calling layout.login() in your child component or change your slot param to :openLogForm="openLogForm".

Also, I'm pretty sure there's no Vue magic to make your layout variable available in your entire component. So you will probably have to pass it to your functions as a parameter.

Activity icon

Replied to Open Method In Parent Component From Child Component

Can you please post both components code ? Template and script.

Activity icon

Awarded Best Reply on Laravel Vue SPA - Console Error _vm?

When the component gets created, your user is empty until you receive response data from your API. So there's a short period of time where your user is an empty object which doesn't contain the accessed data property. A solution would be to use a computed property with conditional logic inside that ensures that the data property and all its nested properties are loaded before it can be accessed.

Activity icon

Replied to Laravel Vue SPA - Console Error _vm?

When the component gets created, your user is empty until you receive response data from your API. So there's a short period of time where your user is an empty object which doesn't contain the accessed data property. A solution would be to use a computed property with conditional logic inside that ensures that the data property and all its nested properties are loaded before it can be accessed.

Sep
03
1 month ago
Activity icon

Replied to Open Method In Parent Component From Child Component

Ok well since you're using a slot, it is a bit different, because it only has access to its content scope (by default). However, you can make use of scoped slots in the following way to access exposed parent data/methods/etc. inside the slot:

Layout

...
<el-container>
  <el-main>
    <slot :login="login"></slot>
  </el-main>
</el-container>
...

Child

P.S. : The #default="layout" is a shorthand for v-slot:default="layout". Also, layout can be any string, I just decided to use the parent component's name in this case.

<template>
  <layout>
    <template #default="layout">
      <div>
        <el-row>  
          <el-button size="small" type="success" @click="addTo(layout, product.id)">Agregar al carrito</el-button>
        </el-row>

        <el-divider></el-divider>

        <product-component v-for="(prod, index) in related" :key="index" :product="prod" v-on:addToCart="addToCart(layout, $event)"/>
      </div>
    </template>
  </layout>
</template>

<script>
    import Layout from "../../Shared/Layout";
    import ProductComponent from "../../components/ProductComponent";
    import {Carousel, Slide} from 'vue-carousel';

    export default {
        components: {
            Layout,
            ProductComponent,
            Carousel,
            Slide
        },
        data() {
            return {
            }
        },
        methods: {
            addTo(layout, id) {
                if (this.$page.prop.auth.user) {
                    this.$confirm('Agregar este producto a su carrito?', {
                        confirmButtonText: 'OK',
                        cancelButtonText: 'Cancelar',
                        cancelButtonClass: 'el-button--info',
                        type: 'info'
                    }).then(() => {
                        this.$inertia.post('/cart', {
                            product_id: id,
                            quantity: this.quantity
                        }).then(
                            () => {
                                this.$message({
                                    type: 'success',
                                    message: 'Producto agregar a su carrito.'
                                });
                            })
                    });
                } else {
                   layout.login();
                }
            },
            addToCart(layout, product) {
                if (this.$page.prop.auth.user) {
                    this.dialogVisible = true;
                    this.addProduct = product;
                } else {
                    layout.login();
                }

            },
        },
        mounted() {}
    }
</script>
Activity icon

Replied to Open Method In Parent Component From Child Component

I see that you have tried to use this.$emit('login') which is an appropriate way to do what you're trying to do. You just need to catch the event in the parent component and in the in-between components.

For example if you have this structure :

* ComponentA
    * Component B

You will have to implement this in ComponentA (parent) :

<component-b @login="loginDialogVisible = true" />

However, if you have an in-between component (in the following example, ComponentB) and the further nested child (ComponentC) emits an event, ComponentB will have to implement logic to pass the data up

* ComponentA
    * Component B
        * Component C
// Inside ComponentA
<component-b @login="loginDialogVisible = true" />

// Inside ComponentB
<component-c @login="$emit('login')" />

If you want to sell ALL events up to avoid having to define @yourEventName in your in-between components everytime you create/use a new event in the child component, you can use the following :

<your-child-component v-on="$listeners" />
Activity icon

Replied to @mouseover Events Doesnt Work?

@ivanradojevic The following solution will work. If you're not adding/removing images during the execution, this logic could work based on the array index instead of having to specify an ID for each entry. The advantage of the following solution is that it will keep working even if you're removing or adding images dynamically (assuming you distribute unique IDs of course).

You basically take the same logic as before, but scoped into the object matching the ID passed as a parameter.

<div id="app">
  <img
    v-for="image in images"
    :key="image.id"
    :src="getSrc(image.id)"
    @click="handleClick(image.id)"
    @mouseover="handleHover(image.id)"
    @mouseout="handleHover(image.id)"
  >
</div>
export default {
  data() {
    return {
      images: [
        {
          id: 1,
          default: '/img/button-capture-dub-1.png',
          hovered: '/img/button-capture-dub-2.png',
          clicked: '/img/button-capture-dub-3.png'
        },
        {
          id: 2,
          default: '/img/button-capture-dub-4.png',
          hovered: '/img/button-capture-dub-5.png',
          clicked: '/img/button-capture-dub-6.png'
        }
      ]
    }
  },

  methods:{
    getSrc(id) {
      let src = '';
      let image = this.images.find(image => image.id === id);
      
      if (image) {
        src = image.default;
        
        if (image.isHovered) {
          src = image.hovered;
        } else if (image.isClicked) {
          src = image.clicked;
        }
      }
      
      return src;
    },
    
    handleClick(id) {
      let index = this.images.findIndex(image => image.id === id);
      
      if (index !== -1) {
        this.images[index].isClicked = !this.images[index].isClicked;
        this.$set(this.images, index, this.images[index]);
      }
    },
    
    handleHover(id) {
      let index = this.images.findIndex(image => image.id === id);
      
      if (index !== -1) {
        this.images[index].isHovered = !this.images[index].isHovered;
        this.$set(this.images, index, this.images[index]);
      }
    }
  }
}
Sep
02
1 month ago
Activity icon

Awarded Best Reply on Help With Combining Two Eloquents

You're not specifying the table in your subquery.

$test = Record::select(DB::raw('id, board, region_id'))->whereIn('id', function ($query) {
    $query->select(DB::raw('MAX(id) as id'))->from('records')->groupBy('region_id');
})->get();
Activity icon

Awarded Best Reply on @mouseover Events Doesnt Work?

Well, there are a couples of things wrong with your code :

  • You have two img with a mutual conditional visibility (if one is shown, the other isn't). This being said, your isHovered variable is set to false initially, so that means the second img shows on load and the mouseover event isn't bound to it. That means you have no implemented logic to toggle isHovered during the execution

  • You have not implemented mouseout, which means you'll get an unexpected behavior when leaving the image and hovering back in

I do not know what exactly you're trying, but would the following solution suit your needs ?

<div class="">
    <img
      :src="src"
      @click="toggle"
      @mouseover="hovered"
      @mouseout="hovered"
    >
</div>
export default {
  data() {
    return {
      isClicked: false, 
      isHovered: false
    }
  },

  computed: {
    src() {
      let src = '/img/button-capture-dub-1.png';
      
      if (this.isHovered) {
        src = '/img/button-capture-dub-2.png';
      } else if (this.isClicked) {
        src = '/img/button-capture-dub-3.png';
      }
      
      return src;
    }
  },

  methods:{
    toggle() {
      this.isClicked = !this.isClicked; 
    },

    hovered() {
      this.isHovered = !this.isHovered; 
    }
  }
}
Activity icon

Replied to @mouseover Events Doesnt Work?

Well, there are a couples of things wrong with your code :

  • You have two img with a mutual conditional visibility (if one is shown, the other isn't). This being said, your isHovered variable is set to false initially, so that means the second img shows on load and the mouseover event isn't bound to it. That means you have no implemented logic to toggle isHovered during the execution

  • You have not implemented mouseout, which means you'll get an unexpected behavior when leaving the image and hovering back in

I do not know what exactly you're trying, but would the following solution suit your needs ?

<div class="">
    <img
      :src="src"
      @click="toggle"
      @mouseover="hovered"
      @mouseout="hovered"
    >
</div>
export default {
  data() {
    return {
      isClicked: false, 
      isHovered: false
    }
  },

  computed: {
    src() {
      let src = '/img/button-capture-dub-1.png';
      
      if (this.isHovered) {
        src = '/img/button-capture-dub-2.png';
      } else if (this.isClicked) {
        src = '/img/button-capture-dub-3.png';
      }
      
      return src;
    }
  },

  methods:{
    toggle() {
      this.isClicked = !this.isClicked; 
    },

    hovered() {
      this.isHovered = !this.isHovered; 
    }
  }
}
Activity icon

Replied to Help With Combining Two Eloquents

You're not specifying the table in your subquery.

$test = Record::select(DB::raw('id, board, region_id'))->whereIn('id', function ($query) {
    $query->select(DB::raw('MAX(id) as id'))->from('records')->groupBy('region_id');
})->get();
Sep
01
1 month ago
Activity icon

Replied to JSON String Data Button Click Is Not Working In Vuejs

@nafeeur10 Understandable.

I have question for you :

If for some reason you have to output something dynamically based on a variable, why don't you place your element or component in the template from the get go and update its visibility/classes/props based on the dynamic variable?