logaretm

logaretm

Member Since 3 Years Ago

Portsaid

Experience Points 40,020
Experience Level 9

4,980 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 404
Lessons
Completed
Best Reply Awards 8
Best Reply
Awards
  • start-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-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-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist 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.

13 Mar
2 years ago

logaretm left a reply on Vue Multiselect Submit

Can you describe what exactly are you trying to do? do you mean $request does not contain the ids or does it send objects instead?

For the first case, I don't think Multiselect offers named inputs to appear in requests, so you should either wrap it, or bind some hidden inputs to it.

Here is a small wrapper I created for a project sometime ago:

<template>
  <div>
    <div v-if="multiple">
      <input :name="`${name}[]`" type="hidden" v-for="selected in innerValue" :value="selected[trackBy]">
    </div>
    <div v-else>
      <input :name="name" type="hidden" :value="innerValue ? innerValue[trackBy] : null">
    </div>
    <multiselect
        v-model="innerValue"
        :options="remote ? innerOptions : options"
        :is-loading="searching"
        @search-change="searchChanged"
        :placeholder="placeholder"
        :tag-placeholder="tagPlaceholder"
        :track-by="trackBy"
        :label="label"
        :multiple="multiple"
        :taggable="taggable"
        @tag="addTag"
        :close-on-select="! multiple"
    >
    </multiselect>
  </div>
</template>
05 Mar
2 years ago

logaretm left a reply on Event Bus Not Working

I'm not sure what could be causing this but lets reduce the possibilities:

window.Event = new Vue();

In my opinion this is not a very good idea since the Event interface is a native JavaScript object and you should not overwrite it because other plugins or libraries might be using it, so its not safe to overwrite it.

You could just prefix it to ensure you are not modifying a native object.

window.AppEvents = new Vue();
01 Mar
2 years ago

logaretm left a reply on How To Bind The Value From Select In VueJS With Select2

I'm not sure what do you mean by listener you only have to add v-model and bind them to whatever you need.

Here is a page with 3 selects:

https://jsfiddle.net/logaretm/u0om9zz6/

logaretm left a reply on What Is Wrong With This Syntax ??

I do not think that is possible, because blade views are rendered first, so blade directives will be assessed first, resulting in obvious errors because Vue.js variables will not be available until the user loads the js files which is way after the view is rendered with blade.

The best you can do is to compare them using Vue.js with v-if because all values will be available then.

So something like this should work:

@foreach($states as $state)                            
    <template v-if="selected === {{ $state->region->name }}">
        <p>done</p>
    </template>
@endforeach

logaretm left a reply on How To Bind The Value From Select In VueJS With Select2

It is because select2 hides the actual select element and provides a different UI to manipulate the input. so you need to sync changes yourself.

There is an official example here:

https://vuejs.org/v2/examples/select2.html

which wraps the select2 behavior in a reusable component.

logaretm left a reply on Javascript Error In Vue2 Component Method Yet Works From Root Instance And The Console

I think it is related to your build process, you could be including jQuery twice by mistake. which would explain such behavior.

Or you could be importing bootstrap at a later stage in your code, so it might not be available for the component.

logaretm left a reply on Simple Vue Component Not Work

header is a native HTML element, so you need to name your component differently.

A common practice is to prefix your components with a shorthand of your app name, for example if your app is called Spark you can name it spk-header or whatever. that way you can avoid such issues.

https://jsfiddle.net/logaretm/j80du8qj/

logaretm left a reply on Vue Pagination Creates Pagination Links Starting From 0

In Vue.js 1.0 the v-for range starts from 0 while in Vue.js 2.0 it starts from 1 so you are going to have to +1 your page iterator.

http://v1.vuejs.org/guide/list.html#Range-v-for

https://vuejs.org/v2/guide/list.html#Range-v-for

28 Feb
2 years ago

logaretm left a reply on Collection, High Order Messages

You need to return a Boolean to be more explicit, $this->where will return a query builder object which is pretty much true because its not falsy.

logaretm left a reply on Performance Improvements - Lots Of DOM Elements

You can always do the same thing like you did in jquery, add the @click on the loop parent.

https://jsfiddle.net/logaretm/tud7heyc/

You might need to do some complex logic to determine if you want to respond to such click since it might originate from any element within that parent.

23 Feb
2 years ago

logaretm left a reply on Get Value From Component’s Slot Input

The slots scope is limited to the parent scope, because it is compiled in the parent scope, as the docs say:

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

That means any properties inside your form component is not available to be used outside of that component, so you can't use formData.

There are multiple solutions, the easiest is that you can move the formData to be a property on your ajax-form and add the formData on the data of the parent instance.

22 Sep
2 years ago

logaretm left a reply on WYSIWYG - TinyMCE And Vue (laravel Spark)?

@OK200Paul

Sorry I couldn't reply earlier. for the record I was using TinyMce v 4.3.13 in a Laravel app with Vue, not spark tho.

In your usage

<textarea id="helpArticleContentDiv" v-directive="tinymce" class="wysiwyg"></textarea>

it should be v-tinymce instead of v-directive="tinymce"

<textarea id="helpArticleContentDiv" v-tinymce class="wysiwyg"></textarea>

On a side note, my setup was with Webpack, without using Laravel Elixir. in my Loaders list I included this:

{
    test: require.resolve('tinymce/tinymce'),
    loaders: [
        'imports?this=>window',
        'exports?window.tinymce'
    ]
}

which uses the imports loader and the exports loader to inject tinmyce to the window. I had my fair share of hair pulling because of this :)

logaretm left a reply on WYSIWYG - TinyMCE And Vue (laravel Spark)?

I used tinymce as a directive to make things contained for me,:

import tinymce from 'tinymce/tinymce'; // or require

    Vue.directive('tinymce', {
        bind() {
            tinymce.init({
                selector: `#${this.el.id}`,
                theme: 'modern'
            });
        }
    });

May I ask what version of tinymce is it?

21 Sep
2 years ago

logaretm left a reply on VueJS Ajax Form Data Return

Sorry, I didn't understand, try this:

var params = {
    username: this.username; 
};

this.$http.get(address, { params: params } ).then((response) => { // whatever ... });

the get method in order to send a GET query parameter, you should namespace the parameters in a param object.

20 Sep
2 years ago

logaretm left a reply on VueJS Ajax Form Data Return

use console log, should tell you a lot about your data and the vue-resource response structure in general.

Anyways, the response data is namespaced in data property. so you can access it like this:

console.log(response.data); // should display your form data.

I would suggest giving a namespace for the returned data like this:

public function testdata(Request $request)
 {
    $formData = $request->input('username');
    return [
        'username' => $request->input('username')
    ];
}

which is then accessible using:

console.log(response.data.username);

logaretm left a reply on Using Component Inside Another

Assuming you use Vue 1.0 you would leverage events, maybe register the alert component globally using Vue.component, which should have a listener for the event name of your choosing:

Vue.component('alert', {
    // whatever data and methods ...
    events: {
         alertUser(data) {
             // display your alert and passed data however you want.
                alert(data.title);
         }
    }
});

Vue.component('todo-list', {
    // whatever data ...
    methods: {
        // same thing goes for delete and whenever you want to display alerts.
        add(title) {
             // add the item.
             this.$broadcast('alertUser',  { title: 'New item added!' });
        }
    }
});

then use the alert component within your todo component.

But I guess ideally you would want to have some global level alert system, not just local to the component. I mean that the root instance should be responsible for triggering those alerts, which allows any component to request triggering an alert. so it would look like this:

new Vue({

    events: {
         alertUser(data) {
            // display your alert however you want.
            alert(data.title);
        }
    }
});

then whenever you want to display an alert from a child component you send your event upwards so it reaches the root vue instance:

this.$dispatch('alertUser', { title: 'Something cool happend'  });

In Vue 2.0 events are pretty limited for a good reason, so you can do the same using Vuex and implement some kind of message queue, whenever a new message is pushed in, root instance should display it.

logaretm left a reply on Vue - General Question About Importing Common Libraries

Wrapping other libraries inside a Vue component is usually the same, you import the library, you initialize it in the ready life cycle event or mounted (if you are using Vue 2.0). but there are some considerations:

I would suggest considering doing the following for your components:

If you are using selectors, try to use the v-el directive or $el property more, you will guarantee the elements that are being selected are the ones inside your component scope. in other words to prevent side effects. if you have two datatables components in a page the selector will run them twice because you are selecting them by class.

import DataTable from 'datatables';

export default {
    ready() {
        $(this.$el).DataTable( ); // select the root element of this component instance and apply datatable on it.
    }
}
<template>
    <div>
        <!-- Maybe some elements and titles -->

    <table v-el:table>
             <!-- The element to become a datatable -->
        </table>
    </div> 
</template>

<script>
import DataTable from 'datatables';

export default {
    ready() {
        $(this.$els.table).DataTable( ); // select the element registered by 'table' name and make it a datatable.
    }
}
</script>

But there is also a question that dictates your structure, How much of the library are you going to use? for example if you only need to apply select2 on select elements and datatables on tables, then components aren't the only tool for you.

Consider using directives, they are very useful, and are better (IMO) than components when it comes to simple element manipulation or behavior, the official select2 example is a good case for this, you don't always need a full fledged component. in your example if you just need to transform some tables to datatables you can just do this:

import DataTable from 'datatables';

Vue.directive('datatable', {
    bind() {
       $(this.el).DataTable();  // select the element that the directive is applied on and initialize datatable on it.
   }
});

Then slap the directive on any table you want to be transformed.

<table v-datatable>
    <!-- Whatever stuff here -->
</table>

which is a far better option than creating a component because you need to take into account that if you are going to create a component, if its responsible for displaying the table elements you are going to pass it some data. if you rendering the table content initially with PHP then you need slots.

I think in general if you only need to run initialization code and be done with it. Directives are the way to go (of course you can always use it in a more complex scenarios). But if you need programmatic control of your elements and some sort of state management then components are a better option especially if you have a lot of repeated html structure.

You can always make both and check which better suites your needs. In time you will learn what should be a component, and what could be a directive. which is a huge progress to manage your Vue.js code structure.

sorry about the long reply, but I hope I helped you in some way.

logaretm left a reply on Keep Laravel-echo-server Running Even If I Close Terminal

I'm not sure, but you should install it globally with sudo privileges otherwise it won't be able to maintain the process.

sudo npm install -g pm2

you can also run pm2 list to check if the process is running, if it is running then probably the problem is elsewhere. sorry I can't help more.

19 Sep
2 years ago

logaretm left a reply on Keep Laravel-echo-server Running Even If I Close Terminal

You can use PM2 to manage and provision Node.js processes.

16 Sep
2 years ago

logaretm left a reply on Submit Data From Select2 Selected Value With Vue

I think select2 doesn't properly inform Vue.js that the value has changed, that is a common problem with a lot of plugins out there. most of the time you have to implement an adapter in a form of directives or components depending on your needs.

anyways, here is an official example which uses a directive to initiate select2 and monitor changes to inform Vue of the change.

15 Sep
2 years ago

logaretm left a reply on Vue Js Independent Form Validation On Mulitple Forms

I don't think creating a vue instance for each form is a good idea, for repeated behaviors and functionality you should use components like @diesalher said. Its their purpose after all.

I suggest you create form component yourself and combine it with a validation plugin to display each form errors independently.

As for validation plugins, Shameless plug here, checkout my vee-validate it offers validation rules similar to the laravel syntax and usage, and I think its fairly simple to use.

logaretm left a reply on Local Component Registration

Its because the compilation scope of the slots is not the same as the component, from Vue.js Docs

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

In other words you are registering phos-card inside phos-cards scope, but you are using them in the root app scope.

IMHO you have two options here, either register the phos-card globally like you said. Or don't use the slot, and pass an array of the cards data to the phos-cards via a property, something like this:

<template>
    <div :id="getId" class="ui centered cards">
                    <phos-card v-for="card in cards" title="Test 1" icon="child" description="test" href="/"></phos-card>
    </div>
</template>
<script>
        export default {
        name: "phos-cards",
        components: {
            'phos-card': require('./phos-card.vue'),
        },
        props: {
          cards: []
            ...
     }
</script>
14 Sep
2 years ago

logaretm left a reply on Pass Arguments To Computed Properties

I don't think you can pass arguments to the computed properties, because they are properties. A slightly more complex than a simple getters.

So I suggest you use components to overcome the issue by extracting the strong element to a custom component that can accept properties, something like this:

const stronger = {
    props: ['option', 'value'],
  template: '<strong v-show="isActive">Active</strong>',
  computed: {
    isActive() {
            return true;
    }
  }
};

Whenever the value changes it will update because its being observed as a property in the component. I think you can also extract even more into the component, maybe the entire li element in the inner loop can be wrapped in a component.

I've created a fiddle that should be similar to what you have.

logaretm left a reply on Calling Function From Slot

I will quote this from Vue.js docs:

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

That means that the branch that you are referencing is not the same as the one in your loop, because the one in the loop belongs to the component scope, but the one you are passing to openProductsModal belongs to the parent scope, which is not defined thus you get undefined.

one way to fix that is to move some of your slot elements inside the template so they can be in the same compilation scope, but that will defeat the purpose of you using slots, so I suggest you revise what you are using slots for.

How likely is the slot to change and how drastic is the change. Maybe you can just expose some properties that help you style or cycle through multiple predefined slot templates. Maybe leverage the Dynamic component in docs to cycle between them as needed.

07 Apr
3 years ago

logaretm left a reply on How To Call Vuex Function From Vue-router BeforeEach Callback

I'm working with the following where I had to reset the state each time the router changed.

in your main app instance (the one that will be bound with the router)

    
    // Import vuex store
    import store from './vuex';
   // import all the actions (or select specific ones).
    import { checkUserIsLogin } from './vuex/actions';

    export default {
        store,
        vuex: {
            actions: {
        checkUserIsLogin
        }
        },
    // .... 
}

then in your router configuration you can access the main app with router.app so your beforeEach will look like:

    router.beforeEach(transition => {
    // call your actions.
        router.app.checkUserIsLogin();
    // other stuff...
        transition.next();
    });
19 Jan
3 years ago

logaretm left a reply on Use Parent Component's Method

While I know you want to access the component parent method but allow me to suggest another approach. You can leverage events, you could listen to an event on the parent and have the child trigger or "emit" it.

for example in your parent you could add an events block

events: {
stepNavigated: function (stepName) {
    this.getNextStep(stepName);
}
}

while on your child component

<template>
    <a @click.prevent="this.$emit('stepNavigated', 'login')">Start <i class="icon arrow-right"></i></a></p>
</template>

what happens here is:

Your parent component listens for an event called "stepNavigated" it doesn't care which component triggered it, all it knows that a step needs to be navigated to, and it accepts the stepName parameter. when your button is clicked on the child element it emits an event with the parameter stepName = 'login' which will be passed up the chain of the parent components.

whenever you need the child to trigger an action on the parent, let the parent wait for the event. and make the child broadcast it.

so in your case whenever you want to navigate to a state just call.

this.$emit('stepNavigated', 'sate');

note that $emit() broadcasts the event to the parent chain, so if you use it on a parent component, the child components won't be able to detect it, $dispatch() however broadcasts the event to the child chain.

You can watch Jeffery's latest video about it in the Vue Series here: https://laracasts.com/series/learning-vue-step-by-step/episodes/15

or refer to the documentation which is excellent: http://vuejs.org/api/#vm-emit

I'm not sure if that is what you want, and I hope it can help you solve your issue. and note that I'm new to Vue so there is defiantly a better way to do it.