iosononando

Experience

69,840

0 Best Reply Awards

  • Member Since 3 Years Ago
  • 907 Lessons Completed
  • 23 Favorites

31st May, 2018

iosononando left a reply on Deploying A Laravel Application To DreamHost Shared Hosting • 1 month ago

@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 • 1 month ago

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?

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

Thanks! :D

30th May, 2018

iosononando started a new conversation Multiple Vue Component Instances Get Their Keys Mixed Up • 1 month ago

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!

23rd February, 2017

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

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!

21st February, 2017

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

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!

Edit Your Profile
Update

Want to change your profile photo? We pull from gravatar.com.