iosononando

iosononando

Member Since 4 Years Ago

Experience Points 74,540
Experience
Level
Lessons Completed 954
Lessons
Completed
Best Reply Awards 0
Best Answer
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

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

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

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

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    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 Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

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

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

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

31 May
5 months ago

iosononando left a reply on Deploying A Laravel Application To DreamHost Shared Hosting

@alesh , the node_modules dir is created when you run npm install which is for all the good front-end stuff. If you don't install any npm dependencies, then you don't have the folder.

On the other hand, I'll try a slightly different approach to what you suggest, namely, download the repository and then manually copy the vendor folder. That way, one can still benefit from version control while having to track only one folder manually.... or did you try that approach with little success?

iosononando left a reply on Deploying A Laravel Application To DreamHost Shared Hosting

Hey @alesh , thanks for the guide! Perhaps you may want to add an extra bit of info to step 3, i.e. that also the node_modules directory should not be uploaded?

30 May
5 months ago

iosononando started a new conversation Multiple Vue Component Instances Get Their Keys Mixed Up

TL;DR: why they all point to the same endpoint?

Hi everyone, I'm coming with a tricky problem. I have a super basic global component (Confirm.vue) that displays a checkbox and submits an axios request to the server to confirm some action (e.g order-delivered, etc... you get the point).

The component, at its bare bones, looks like this:

<template>
    <div class="field">
        <input :class="classes" 
                type="checkbox" 
                :checked="isActive"
                @click="toggle">
        <label for="ticketsDelivered" v-text="text"></label>
    </div>
</template>

<script>
export default {
    props: ["status", "endpoint"],

    data() {
        return {
            isActive: !!this.status
        };
    },

    computed: {
        text() {
            return this.isActive ? "Yes" : "No";
        },
        classes() {
            return this.isActive
                ? "is-checkradio is-block is-success"
                : "is-checkradio is-block";
        }
    },

    methods: {
        toggle() {
            axios
                .patch(this.endpoint, {
                    newstatus: this.isActive ? 0 : 1
                })
                .then(response => {
                    this.isActive = !this.isActive;
                    flash("success", "Done!");
                })
                .catch(errors => {
                    console.log(errors);
                });
        }
    }
};
</script>

The endpoint comes from a blade template which looks like this:

@foreach($orders as $order)
    //some code
    <confirm :endpoint="{{ json_encode($order->endpoint) }}" :status="{{ json_encode($order->status) }}"></confirm>

Assuming that the endpoinst are:

  • url.com/1
  • url.com/2
  • url.com/3

Whay on earth do they all patch to url.com/1 ????????

I have also tried to key the components to the order->id, which is unique, with little success... Thanks for the help!

23 Feb
1 year ago

iosononando left a reply on How To Use A Vue-related Npm Package In Laravel App

Hi @tomasz.r and @hendranucleo ! Thanks a lot for the reply :D

The first answer is:

Uncaught SyntaxError: Unexpected identifier

It refers to the line import draggable from 'vuedraggable' and it completely makes sense, as that should be compiled. My fault.

On the other hand, sortablejs is being loaded, as it is a dependency of vuedraggable.

I've tried this new approach, yet things don't work:

app.js

var draggable = require('vuedraggable');

Vue.component('draggable', require('./components/MyDraggable.vue'));

MyDraggable.vue

<script>

    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        }
    }

</script>

My blade view:

<div id="app">

    <draggable :list="list" @start="drag=true" @end="drag=false">

        <div v-for="element in list">{{element.name}}</div>

    </draggable>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            list: [
                { name: "Some element", id: 1 },
                { name: "Some other element", id: 2 },
                { name: "An extra element", id: 3 },
                { name: "Final element", id: 4 }
            ]
        }
    });

</script>

And now the error is: Failed to mount component: template or render function not defined. So I added a template to the MyDraggable.vue like this:

<template>
    <nav class="panel" id="movements">
        <slot></slot>
    </nav>
</template>
<script>

    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        }
    }

</script>

This way Vue.js doesn't complain, the list gets rendered in the browser, and everything seems to work, but the list is not sortable/draggable, which takes me back to the beginning :P

Any ideas? Thanks a lot!

21 Feb
1 year ago

iosononando started a new conversation How To Use A Vue-related Npm Package In Laravel App

Hi, everyone! As many people here, I'm fairly new to Vue. I've watched all of the Vue 2.0 videos here at Laracasts and done all my homework (with a bit of success), jet I'm struggling to find a solution to what looks to be a very simple problem: how do I use in a Laravel app a vue-related npm package?

As an example, I've been trying to use Vue.Draggable, and following their instructions, I've done the following:

Installed the package:

npm install vuedraggable --save

Then, in my app.js file I've required vuedraggable:

var draggable = require('vuedraggable');

Finally, in my blade view I've inserted their sample code:

<div id="app">

    <draggable :list="list" @start="drag=true" @end="drag=false">

        <div v-for="element in list">{{element.name}}</div>

    </draggable>

</div>

<script>

    Vue.component('draggable', {
        import draggable from 'vuedraggable',
        export default {
            components: {
                draggable,
                }
        }
    });

    new Vue({
        el: "#app",
        data: {
            list: [
                { name: "Some element", id: 1 },
                { name: "Some other element", id: 2 },
                { name: "An extra element", id: 3 },
                { name: "Final element", id: 4 }
        }
    });

</script>

And this clearly doesn't work. Any help would be hugely appreciated! Thanks!