nhayder

nhayder

Member Since 8 Months Ago

Experience Points 24,650
Experience
Level
Lessons Completed 191
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.

12 Dec
1 day ago

nhayder started a new conversation Vuex And Multiple :class Values

i'm using vuex store to fitch data from db then passing data to component

// this is how im looping through the section element
<section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-center relative px-5" style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

    <widget-config :widget="widget" :index="index"></widget-config>

    <div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">

      <component :is="widget.name" :widget="widget"></component>

    </div>

</section>

the issues that i'm facing is in the :class element, laravel is able to display the first value only widget.wide

<div :class="[ widget.wide, widget.pt, widget.pb, 'mx-auto' ]">

all data are being passed to the component as shown above but not the :class part of the component.

can anyone see and issues with my code???

02 Dec
1 week ago

nhayder started a new conversation Mutating Multiple Value In One Single Function

i have tones of boolean data stored on DB as 1/0 i need to mutate these values using eloquent model mutation to change the values from 1/0 to true/false.

// this is my mutation function
    public function getParallaxAttribute($value)
    {
        if($value = 1){

            return true;
        }

        return false;
    }

mutation is working perfectly but i have almost than 20 values to mutate every time i call them from DB.

so my question is: Is there is any way to include multiple values to the mutation function above

19 Nov
3 weeks ago

nhayder left a reply on VUEX + Laravel -> Storing Boolean Value As True/false Instead 1/0

@primordial correct, i'm using MySql, i think mutators will definitely work, never thought of that actually.

Thanx man

nhayder started a new conversation VUEX + Laravel -> Storing Boolean Value As True/false Instead 1/0

Im using vuex together with laravel 5.6, normally i store boolean data as 1/0 in the DB but im trying to find a way to store the data as true/false so i will be able to bind data from vuex store like this

                  <div class="w-1/2 block text-right">
                        <input v-model="wide" type="checkbox" name="wide" id="wide"/>
                  </div>

                  <div class="w-1/2 block text-right">
                        <input v-model="full_screen" type="checkbox" name="full_screen" id="full_screen"/>
                  </div>

the wide + full_screen are streamed directly from vuex store.

now a user can change these value as he wish by clicking the checkbox, then i will be able to emit a mutation to the store.

currently im storing the data as 1/0 only and this is not getting proper binding for the checkbox. so i had to make a action value which i think ican skip if i can store the data as true/false directly on the database.

So my question is? how can i store the data on DB using laravel as true/false.

Any ideas

08 Nov
1 month ago

nhayder left a reply on Vuex Always Remove First Widget In My Widget List With Splice Function

It looks like i forgot to pass the index from the component before it hits the store

this.$store.dispatch('deleteWidget', index);

these small stuff makes me go mad sometimes.

Anyways this thread is done

nhayder left a reply on Vuex Always Remove First Widget In My Widget List With Splice Function

@cmdobueno tried your code but still not getting the correct result, im getting the correct index form the component

nhayder started a new conversation Vuex Always Remove First Widget In My List

with vue + vuex + laravel im populating widget list using axios from database, a user can delete a widget from his account as he wished, what i'm having now is that the delete button always deletes first entry of the list where is should removes what the user has selected.

this is my store.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const store = new Vuex.Store({

    state:{

        widgets : [],
    },

    mutations: {

        SET_PAGE (state,pageInfo){

            state.widgets = pageInfo;

        },

        REMOVE_WIDGET: (state, index) => {

            state.widgets.splice(index, 1);

            Event.$emit('requestAlertSuccess');

        }

    },

    actions: {

        getPageInfo: function({commit}){

            axios.get('/admin/designer/api/widgets')
                
                .then(response => {

                    this.widgets = response.data;

                    let pageInfo = response.data;

                    commit('SET_PAGE', pageInfo)

                })

            .catch( error => {

                  Event.$emit('requestAlertDanger');

            })
        
        },

        deleteWidget (context){

            context.commit('REMOVE_WIDGET')

        }

    },
 })

from a component im populating a list of widgets with delete button on every widget set

<template>

    <span>

      <section v-for="(widget, index) in widgets" :key="widget.id" class="flex flex-col justify-around relative" style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

          <div class="absolute flex pin-l pin-t bg-teal">

            <a href="javascript:void(0)" class="no-underline focus:bg-red-dark hover:bg-red h-16 w-16 flex items-center justify-center text-white" @click="deletewidget(widget.id, widget.name, index)">

               <i class="far fa-trash-alt"></i>
            </a>

            <a href="javascript:void(0)" class="no-underline hover:bg-orange h-16 w-16 flex items-center justify-center text-white">
               <i class="fas fa-arrows-alt-v"></i>
            </a>

            <a href="javascript:void(0)" class="no-underline hover:bg-blue-dark h-16 w-16 flex items-center justify-center text-white">
               <i class="fas fa-cog"></i>
            </a>

          </div>


          <div class="container mx-auto px-5 pb-20 pt-20">

            <component :is="widget.name" :widget="widget"></component>

          </div>

      </section>

    </span>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'widgets',

  mounted () {

    this.$store.dispatch('getPageInfo');

  },

  computed:{

    ...mapState([

        'widgets'

      ]),
  
  },

  methods:{

    deletewidget : function(id, name, index){

      swal({

        title: 'Are you sure?',

        text: 'You won\'t be able to revert this ( '+name+' )',

        type: 'warning',

        showCancelButton: true,

        cancelButtonColor: '#3085d6',

        confirmButtonColor: '#d33',

        confirmButtonText: 'Yes, delete it!'

      }).then((result) => {

        if (result.value) {

            axios.delete('/admin/designer/api/deletewidget/'+id)

            .then( response => {

              this.$store.dispatch('deleteWidget');

            })

            .catch( error => {

              Event.$emit('requestAlertDanger');

            })

        }

      })

    },

  }

}
</script>

im not sure why vuex always deletes the first entry ????

Any ideas

01 Nov
1 month ago

nhayder started a new conversation Vuex Multiple Widget Mouse Hover State

I'm trying to show green outline when mouse enters a page widget, the widgets are dynamically populated use vuex.

this is my store.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import axios from 'axios';

 Vue.use(Vuex, axios);

 export const store = new Vuex.Store({

    state:{

        page : [],  
    },

    mutations: {

        SET_PAGE (state,pageInfo){

            state.page = pageInfo;

        },
    },

    actions: {

        getPageInfo: function({commit}){

            axios.get('/admin/designer/api/pageinfo')
                
                .then(response => {

                    this.page = response.data;

                    let pageInfo = response.data;

                    commit('SET_PAGE', pageInfo)

                })

            .catch( error => {

                  // this.alertDanger();

            })

        },
    },
 })

the pageInfo object contains list of widgets available on current page, this is how i display them on the page like this

<template>

    <span>

      <section v-for="(widget, index) in page.widgets" :key="widget.id" class="flex flex-col justify-around relative"

        :class="[

          mouseEntered

        ]"

        @mouseover="isOver" // shows green border when hovered

        @mouseout="isOut" // removes the green border when mouse away

       style="background: linear-gradient(rgba(52, 144, 220, 0),rgba(52, 144, 220, 1)),url('/storage/theme/background.jpg')">

          <div class="container mx-auto px-5 pb-20 pt-20">

            {{widget.name}}

          </div>

      </section>

    </span>
          
</template>

<script>

import {mapState} from 'vuex'

export default {

  name: 'pageWidgets',

  data () {

    return {

      mouseEntered:'', // When widget is selected

    }

  },

  mounted () {

    this.$store.dispatch('getPageInfo');

  },

  computed:{

    ...mapState([

        'page'

      ]),
  
  },

  methods: {


    isOver : function(){

      this.mouseEntered = 'shadow-widget';

    },

    isOut : function(){

      this.mouseEntered = '';

    },

  }

}
</script>

after the page loads all page section i need to show green border around hovered section of the page, at the same time? the green border should be removed when the mouse leaves to another page section. using these on the code above

        @mouseover="isOver"

        @mouseout="isOut"

What i have currently is that the green outline is showing on all page sections on the page where it should outline the hovered section only.

any ideas how to fix this issue.

29 Oct
1 month ago

nhayder left a reply on Is Vuex Compatible With Laravel 5.6 ??

@wilk_randall thank you for the push, i will definitely use it then

nhayder started a new conversation Is Vuex Compatible With Laravel 5.6 ??

Hi, my app is getting seriously complicated and i started to lose trans of components data, ??

i thinking of using vuex together with laravel 5.6.

so my question is can i use vuex together with laravel 5.6??? is it recommended???

28 Oct
1 month ago

nhayder left a reply on Close Popover Panel When Click Outside

@sfz0311 i had to tweak the code to make work for me, but its working smoothly.

Thanx man:-) for the help

27 Oct
1 month ago

nhayder started a new conversation Close Popover Panel When Click Outside

i have a custom popup componant that appears when a user clicks on a button like this

<a href="javascript:void(0)" @click="togglePanel"> popup</a>

this is the popup window

        <div v-show="isOpen">

          <div class="overflow-y-auto panel-height p-3">
                  
            // here im showing a couple of inputs

          </div>

        </div>

in the component

<script>
    export default {

        data () {

            return {

                isOpen          :       false,
            }

          },
        
        methods : {

            togglePanel : function(){

                this.isOpen = !this.isOpen;

            },
        }

    }
</script>

My question is who to make the popup window close automatically when a use clicks outside the popup window.

24 Oct
1 month ago

nhayder left a reply on $emit() Function Is Not Working

@Yakagi Thank you, The code is working now and im able to control all modals in same way.

All the best

23 Oct
1 month ago

nhayder left a reply on $emit() Function Is Not Working

@Yakagi im not sure if i understood your correctly, im emitting the event from tools component like this

<template>

    <div class="fixed pin-b pin-r p-5 justify-center">

        <a href="javascript:void(0)" @click="openThemeManager">
        </a>

    </div>

</template>

<script>
    export default {

        mounted() {

            //
            
        },

        methods: { 

            openThemeManager: function(){

                this.$emit('theme-requested');
            }
        }

    }
</script>

but the theme i want to show is on another component

<template>

  <div 

    v-show="isVisibleR"

    class="fixed pin-t pin-r ">

      <div class="flex justify-between">


        // code continues here

          </div>

      </div>

  </div>
        
</template>

<script>

export default {

  name: 'themeManager',

  data () {

    return {

        isVisibleR:false,

    }

  },

  methods: {

    toggleThemeManager : function(){
      
        this.isVisibleR = !this.isVisibleR;
        
    }, 

  }
}
</script>

When the user click the button on the tools component, The theme manager modal should show on the page, the toggleThemeManager function will switch the isVisibleR variable to true.

So you want me to listen for the event on the Tools component ???

nhayder started a new conversation $emit() Function Is Not Working

This is taking more than usual to get the $emit function to work, Im using vue js with laravel 5.6 as my backend framework.

This is seriously making me worry on how to fix the issue because NOTHING SO FAR HAS FIXED IT, so i will put all the code that i have maybe somebody can suggest a fix.

i have a tools and theme manager component on my main page blade file

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="ltr">
<head>
    <title>{{ config('app.name') }}</title>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{ mix('/css/designer.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/fontawesome5/css/all.min.css') }}" rel="stylesheet">
    
<body class="bg-blue-lightest font-light leading-normal">
    
    <div id="designer">

        @include('admin.designer.ui.vd-navbar')
        
        @yield('content')

        <theme-manager @theme-requested="showThemeManager"></theme-manager>

        <tools></tools>

    </div>

    <script type="text/javascript" src="{{ mix('/js/designer.js') }}"></script>

</body>

</html>

This is my main js file -> designer.js

require('./bootstrap');

window.Vue = require('vue');
window.swal = require('sweetalert2')

import Tooltip from 'tooltip.js';

Vue.component('theme-manager', require('./components/ThemeManager.vue'));
Vue.component('tools', require('./components/Tools.vue'));

const app = new Vue({

   el: '#designer',

   methods: {

       showThemeManager : function(){

           alert();

       },
   }
});

from tools component i have a button that when clicked it $emits a function to show theme manager component on the page like this

<template>
    <div class="fixed pin-b pin-r p-5 justify-center">
        <a href="javascript:void(0)" class="text-white" @click="openThemeManager">
        </a>
    </div>
</template>

<script>
    export default {

        methods: { 

            openThemeManager: function(){

                this.$emit('theme-requested'); 
            }
        }

    }
</script>

The alert function on the main js file is not getting triggered as expected? so basically its not getting passed from child to parent, not sure what is going on, Just to make it simple i will explain what i did in words

i have 2 components tools and theme-manager component on my app, from tools component i have a button that should show the other component (theme-manager).

1- so in tools component i have a function that triggered when a user clicks the button

 ( this.$emit('theme-requested');  ) 

2- im listening for the event on my main blade page where the root div located id="designer" and where i declared both component (see above)

<theme-manager @theme-requested="showThemeManager"></theme-manager>

<tools></tools>

3- on my main js file i have a function that will show alert('') 
        methods: {

        showThemeManager : function(){
            alert();
        },
    }

4- the alert will be replaced with other function its just for testing the code, 5- the problem is the alert has never be triggered, i just cant make the $emitt() function to work on my app.

I hope sombody have a fix for this, Waiting for assistant ASAP.

nhayder left a reply on Basic $emit() Function Not Working

This is taking more than usual to get the $emit function to work, Im using vue js with laravel 5.6 as my backend framework.

This is seriously making me worry on how to fix the issue because NOTHING SO FAR HAS FIXED IT, so i will put all the code that i have maybe somebody can suggest a fix.

i have a tools and theme manager component on my main page blade file

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="ltr">
<head>
    <title>{{ config('app.name') }}</title>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex,nofollow"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link href="{{ mix('/css/designer.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/fontawesome5/css/all.min.css') }}" rel="stylesheet">
    
<body class="bg-blue-lightest font-light leading-normal">
    
    <div id="designer">

        @include('admin.designer.ui.vd-navbar')
        
        @yield('content')

        <theme-manager @theme-requested="showThemeManager"></theme-manager>

        <tools></tools>

    </div>

    <script type="text/javascript" src="{{ mix('/js/designer.js') }}"></script>

</body>

</html>

This is my main js file -> designer.js

require('./bootstrap');

window.Vue = require('vue');
window.swal = require('sweetalert2')

import Tooltip from 'tooltip.js';

Vue.component('theme-manager', require('./components/ThemeManager.vue'));
Vue.component('tools', require('./components/Tools.vue'));

const app = new Vue({

   el: '#designer',

   methods: {

       showThemeManager : function(){

           alert();

       },
   }
});

from tools component i have a button that when clicked it $emits a function to show theme manager component on the page like this

<template>
    <div class="fixed pin-b pin-r p-5 justify-center">
        <a href="javascript:void(0)" class="text-white" @click="openThemeManager">
        </a>
    </div>
</template>

<script>
    export default {

        methods: { 

            openThemeManager: function(){

                this.$emit('theme-requested'); 
            }
        }

    }
</script>

The alert function on the main js file is not getting triggered as expected? so basically its not getting passed from child to parent, not sure what is going on, Just to make it simple i will explain what i did in words

i have 2 components tools and theme-manager component on my app, from tools component i have a button that should show the other component (theme-manager).

1- so in tools component i have a function that triggered when a user clicks the button

 ( this.$emit('theme-requested');  ) 

2- im listening for the event on my main blade page where the root div located id="designer" and where i declared both component (see above)

<theme-manager @theme-requested="showThemeManager"></theme-manager>

<tools></tools>

3- on my main js file i have a function that will show alert('') 
        methods: {

        showThemeManager : function(){
            alert();
        },
    }

4- the alert will be replaced with other function its just for testing the code, 5- the problem is the alert has never be triggered, i just cant make the $emitt() function to work on my app.

I hope sombody have a fix for this, Waiting for assistant ASAP.

nhayder left a reply on Basic $emit() Function Not Working

@sfz0311 this is totally new never head of ref's before, can you please show some code relative to the example above ??? i will updated it from my side. Its just get solid idea on how to do this.

22 Oct
1 month ago

nhayder left a reply on Basic $emit() Function Not Working

@Drfraker I updated the code and its still not working, I think i have serious issues with my app but i just cant see them?

21 Oct
1 month ago

nhayder started a new conversation Passing Data To Dynamic Component

hi, i'm facing a problem regarding passing data to component loaded dynamically on the page.

i getting section settings using axios and storing data on collection widget array.

this is my main vue component

<template>

<div>
    <section v-for="widget in widgets" class="linx-background flex flex-col justify-around"

    :class=" // here i need to pass multiple widget settings dynamically ????"

    >

        <div class="container mx-auto px-5 pt-20 pb-20">

            <component v-bind:is="widget.name"></component>

        </div>
        
    </section>

</div>

export default {

data () {

return {

    widgets     :       [],

}

},

mounted(){

this.getPageWidgets();

},

name: 'widget',

methods: {

getPageWidgets : function(){

    axios.get('/admin/api/pagewidgets')
        
    .then( response => {

            this.widgets = response.data;

    })

    .catch( error => {

          this.alertDanger();

    })

},


    })

},

}

}

Every section have deferent css classes so how can i pass these data to component accordingly

nhayder left a reply on Conditional Class Binding

@crnkovic i getting all settings from DB with axsio and storing them in collection array called widgets and im looping through multiple div's

<section v-for="widget in widgets" class="flex flex-col justify-around"

        :class="fullScreenClasses"

        >

            <div class="container mx-auto px-5 pt-20 pb-20">

                <component v-bind:is="widget.name"></component>

            </div>
            
        </section>

so how to update you code to par correct settings with correct div

// i updated your code like this
    computed: {

        fullScreenClasses() {

            return this.widgets.full_screen === 1 ? 'lg:h-screen md:h-screen' : '';

        }

    },

its not returning the correct settings

nhayder started a new conversation Conditional Class Binding

i'm facing a situation where i need to check if a user enabled full screen option of when saving data, on my DB i have full_screen accepting 1 or 0 where 1 is enabled.

so if the value save in db is 1 i need to bind :class 2 class's lg:h-screen md:h-screen

if its 0 i need to iqnore.

i need to do a couple of check similer to this a couple of times for same div so the class might have full_screen class's and other checks alos.

What is the best way to do this with vue

20 Oct
1 month ago

nhayder left a reply on Vue + Axios Returning 405 (Method Not Allowed)

@D9705996 the /admin/designer is the root group of my route white i did't include in the post.

the full URL of the API is domain/admin/designer/api/newpage, i made it as per your recommendation and my code is working now.

nhayder started a new conversation Vue + Axios Returning 405 (Method Not Allowed)

i creating new page using vue.js and axios, im getting method not allowed when i post the form

my web.php

// this route requires authentication to access it
Route::prefix('api')->group(function (){
    Route::get('/pagelist', '[email protected]');
    Route::get('/activelanguages', '[email protected]');
    Route::post('/newpage', '[email protected]');
});

app.js i have this function to add new page


    addNewPage : function(){

        this.isDisabled = true;

        axios.post('/admin/designer/api/newpage', {

            name        : this.name,
            direction   : this.direction,
            language_id : this.language_id,

        })

        .then( response => {

            // push data to array
            this.pages.unshift({

                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,

                });

            this.name = '';

            this.getPages();

            this.alertSuccess();

        })

        .catch( error => {

            if (error.response.status == 422) {

              this.isDisabled = false;
              this.errors = error.response.data.errors;

            }

        })

        this.isDisabled = false;

        event.target.reset();

        this.errors = '';

    },

the post request is returning

GET http://127.0.0.1:8000/en/admin/designer/api/newpage 405 (Method Not Allowed)

it says GET where my code is posting the data,

any ideas???

19 Oct
1 month ago

nhayder left a reply on Basic $emit() Function Not Working

@petritr and @D9705996 Any ideas on what's going on

nhayder left a reply on Basic $emit() Function Not Working

this is the child component where a user can click a button to show PageManager

<template>
    <div class="fixed pin-b pin-r p-5 justify-center">

        <a href="javascript:void(0)"  @click="showPageManager">
           <i class="fas fa-paint-brush"></i>
        </a>
    </div>
</template>

<script>
    export default {

        mounted() {

            //
            
        },

        methods: {

            showPageManager : function(){

                this.$emit('showPage');

            }         
        }

    }
</script>

i added this listener on the pageManger component like this

<template>

  <div 

    v-show="isVisibleR"

    v-on:showTheme="togglePageManager"

    >

      // reset of the code goes here


      </div>

  </div>
        
</template>

<script>

export default {

  name: 'pageManager',

  data () {

    return {

        isVisibleR:false,

        swatchVisible:false,

        primaryColor: 'bg-green',

    }

  },

  methods: { 

    togglePageManager : function(){
      
        this.isVisibleR = !this.isVisibleR;
        
    },  

  }
}
</script>


can anybody see something wrong with my code, coz i'm stucked big time on this.

nhayder left a reply on Basic $emit() Function Not Working

@Drfraker i already tried that and its not working, ... not sure what is going on with my app

18 Oct
1 month ago

nhayder started a new conversation Basic $emit() Function Not Working

Im 2 weeks old when it comes to vue.js im struggling since couple of days ago to make show / hide functionalities for my custome page manager component.

on the main app.js i have page manager component like this.

require('./bootstrap');

window.Vue = require('vue');

Vue.component('page-manager', require('./components/PageManager.vue'));


const app = new Vue({

    el: '#app',

    data: {

        //

    },

    methods: {

        showPageManger : function (){
    
         this.$emit('togglePageManager); // im guessing this will emit event to child component ???

    } 

    }

});

this is the page manager component

<template>

<div v-show="isVisible" class="fixed pin">

    <div class="cursor-pointer" @click="togglePageManager">
        <i class="fas fa-times text-2xl text-blue-dark"></i>
    </div>
    // reset of my code goes here 
</div>

</template>

<script>

export default {

  name: 'PageManager',

  data () {

    return {

        isVisible   :               false,
    }

  },

  mounted(){

    //

  },

  methods: {

    togglePageManager : function(){

        this.isVisible = !this.isVisible;

    }

  }

}
</script>

the togglePageManger function is working fine withen vue.js component the issue i'm facing is when i added top navigation with permanent button to show/hide vue pageManager component.

// this is the button that should control pageManger component

<a href="javascript:void(0)" @click="$emit('showPageManger')">
              <i class="fas fa-bars fa-2x"></i>
</a>

any ideas how to fix this issue ????

nhayder started a new conversation How To Do A Custom Popover Menu With Vue And Tailwindcss

i'm trying to make similar popover menu to this one https://www.dropbox.com/s/67nf51k5zg70ts0/Screen-Shot-2018-10-18-at-7.08.44-AM.jpg?dl=0

the popover menu should be show when a user clicks on the settings icon (gears icon), and it hides itself on next click outside of it.

what would be the best way to do this type of popover, should it be a popper.js instance which loads and html vue template? or should it be a dropdown menu ???

Any ideas? ....

Can you advise please recommend best practices and maybe show some code.

nhayder started a new conversation How To Do A Custom Popover Menu With Vue And Tailwindcss

i'm trying to make similar popover menu to this one one https://www.dropbox.com/s/67nf51k5zg70ts0/Screen-Shot-2018-10-18-at-7.08.44-AM.jpg?dl=0

the popover menu should show when a user clicks on the settings icon, and it hides itself on next click outside of it.

what would be the best way to do this popover, should it be a popper.js which loads and html vue template? or should it be a dropdown menu ???

Can you advise please and maybe show some code.

15 Oct
1 month ago

nhayder left a reply on Click Outside Contenteditable Element

@Borisu actually i tried that already and it did't work for me, because child element is placed directly on the partent

    <section class="widget-jumborton bg-blue "
        
                    @blue="notEditable" // this will disable editing
        >
      <div class="container mx-auto px-5 pt-20 pb-20">
        
            <div class="text-6xl font-bold text-center text-white" 

                :class="editableClass"

                :contenteditable="editable"

                @click="makeEditable" 

                >

                Click TO EDIT

            </div>

      </div>
    </section>

on same vue component i have this

  methods: {

    makeEditable : function(event){

      this.editable = true;

      this.editableClass = 'shadow-editable rounded';

      // var userInput =  this.content = event.target.innerText;

      // alert(userInput);

    },

    notEditable : function(){

      alert();

    }

  }

after compiling the code the alert is showing if a use click on the editable element + out side the editable element.

nhayder started a new conversation Click Outside Contenteditable Element

I have a vue app that would make element as contenteditable

<div class="text-6xl font-bold text-center text-white" 

                :contenteditable="editable"

                @click="makeEditable" 

                >

                Click to make div editable

</div>
// this is the function i have in the methods array

    makeEditable : function(){

      this.editable = true;

    },

now i need to reverse what i did by making same element as not editable when a user clicks outside that element?

So what would be the vue comment that would take care of this reversed function

Any ideas?

11 Oct
2 months ago

nhayder left a reply on Re-loading Part Of The Page When Adding New Data

@burlresearch option 2 is a good one, no refreshing is required on this app.

is that case i have this on page controller that get all available pages

$pageList = Page::all();

so how to make this $pageList array available to Vue so i can loop through it ???

nhayder started a new conversation Re-loading Part Of The Page When Adding New Data

I have page list loaded on the screen using page controller

    @foreach($pageManager as $page)
        <div class="flex mb-4">
            <a href="\{{$page->slug}}" class="border border-blue-lighter ">

                    @if($page->id == 1)
                    
                        <i class="fas fa-home px-1"></i>
                    
                    @endif

                    <img src="{{asset('storage/images/flags/'.$page->language_id.'.png')}}">

                    @if($page->direction == 0)
                        <span class="fa fa-align-left text-grey-dark px-2"></span>
                    @else
                        <span class="fa fa-align-right text-grey-dark px-2"></span>
                    @endif

                    <span>
                        {{ucfirst($page->name)}}
                    </span>
            </a>

        </div>

on same page i have vue form that a user can add new page

        <form action="{{route('newPage')}}" method="POST" enctype="multipart/form-data" @submit.prevent="addNewPage">
            {{csrf_field()}}
            <div class="flex flex-wrap -mx-3 mb-3">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
                    @lang('translation.name')
                  </label>
                  <input class="focus:outline-none focus:bg-white focus:border-blue appearance-none block w-full text-grey-darker border border-blue-lighter rounded py-3 px-4 mb-3 leading-tight"  

                    type="text" 
                    name="name" 
                    placeholder="@lang('translation.pageNameNote')" 
                    v-model="name" 
                    @keydown="errors.name = null

                    " required autocomplete="off">

                  <span v-if="errors.name" class="text-red text-xs">@{{errors.name[0]}}</span>

                </div>
            </div>

            <div class="flex flex-wrap -mx-3 mb-4">
                <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
                        @lang('translation.language')
                    </label>
                    <div class="relative">
                        <select class="block" name="language_id" v-model="language_id">
                            @foreach($activeLanguages as $languages)
                                <option value="{{$languages->code}}">{{$languages->name}}</option>
                            @endforeach
                        </select>
                                        
                        @can('update_languages')
                            <a href="{{route('languages')}}" class="text-xs">@lang('translation.manageWebsiteLanguages')</a>
                        @endcan
                        
                    </div>
                </div>
                <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
                    <label class="block uppercase">
                        @lang('translation.textDirection')
                    </label>
                    <div class="relative">
                        <select name="direction" v-model="direction">
                            <option value="1">@lang('translation.rtl')</option>
                            <option value="0">@lang('translation.ltr')</option>
                        </select>
                        
                    </div>
                </div>
            </div>

            <div class="flex border-t border-t-grey justify-center py-3 mt-5">

                <button class="linx-btn" :class="isDisabled ? 'disabled' : ''">
                  @lang('translation.createNewPage')
                </button>

            </div>
        </form>

now after the new page created i need to refresh or add the new page to pages list using vue, i have seen a couple of tutorials about this, but i need to know what is the best way to do it.

Any suggestions on how to do this type of refresh / page add ??

nhayder started a new conversation How To Clear Validation Span Element On Keydown

i'm submitting a form with vue js,

            <div class="flex flex-wrap -mx-3 mb-3">
                <div class="w-full px-3 mb-6 md:mb-0">
                  <label class="block uppercase" >
                    @lang('translation.name')
                  </label>
                  <input class="w-full " type="text" name="name" v-model="name" >

                  <span v-if="errors.name" class="text-red text-xs">@{{errors.name[0]}}</span> // validation text

                </div>
            </div>

in app.js

        addNewPage : function(){ 
            axios.post('/api/newpage', {

                // data to send
                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,
            })

            // success
            .then( response => alert('Success'))

            // errors
            .catch( error => {

                if (error.response.status == 422) {

                  this.errors = error.response.data.errors

                }

            })

            event.target.reset();

        },

if the form has erros laravel will show errors in the span element above, So my question how to clear the validation errors on @keydown for every input

10 Oct
2 months ago

nhayder left a reply on Stucked Again With Stevebauman/purify Package? Its Blocking Youtube / Iframe Custome Video Tags From Ckeditor (oembed)

@Thyrosis no sorry it looks like dead end for this issues, In My it looks like tags on ckeditor are streamed through 3rd party service and its paid service not for free.

The simple solution is to get an older ckeditor (4.x Maybe 4.2 0r 4.5 not sure exactly) and used it instead the current release, most of the features available on the older versions are simple html + css code there is not issues on those oldies.

i hope this helps :-)

09 Oct
2 months ago

nhayder left a reply on Sweetalert2 Returning Uncaught ReferenceError: Swal Is Not Defined With Vue

@D9705996 this work, and the error removed

window.swal = require('sweetalert2') // added here

nhayder started a new conversation Sweetalert2 Returning Uncaught ReferenceError: Swal Is Not Defined With Vue

just installed sweetalert2 as my primary alert system, as per the docs i have npm install it and added these for configuration on my main app.js file

require('./bootstrap');

window.Vue = require('vue');

import VModal from 'vue-js-modal'
const swal = require('sweetalert2') // added here

Vue.use(VModal)

also i created a function to show alerts like this

        alertSuccess : function(msg){

            const toast = swal.mixin({
              toast: true,
              position: 'bottom-start',
              showConfirmButton: false,
              timer: 3000,
            });

            toast({
              type: 'success',
              title: msg,
            })

        },

unfortunately, chrome is showing this error on devTools

Uncaught ReferenceError: swal is not defined

What seems to be the problem ?

08 Oct
2 months ago

nhayder left a reply on Axios Returning 405 (Method Not Allowed)

@tykus you are correct, Fixed and its working now, Thanx

nhayder left a reply on Axios Returning 405 (Method Not Allowed)

@tykus this is the erros as shown on chrome extension

POST http://127.0.0.1:8000/api/newpage 500 (Internal Server Error)

Uncaught (in promise) Error: Request failed with status code 500
    at createError (designer.js?id=ef610d6d1feb857cedbf:594)
    at settle (designer.js?id=ef610d6d1feb857cedbf:745)
    at XMLHttpRequest.handleLoad (designer.js?id=ef610d6d1feb857cedbf:155)

nhayder left a reply on Axios Returning 405 (Method Not Allowed)

@D9705996

[2018-10-08 18:25:19] local.ERROR: Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) {"userId":1,"email":"[email protected]","exception":"[object] (ErrorException(code: 0): Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12, ErrorException(code: 0): Trying to get property of non-object (View: /Applications/MAMP/htdocs/linxtter3/resources/views/admin/designer/widgets/page-header-2.blade.php) at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12, ErrorException(code: 0): Trying to get property of non-object at /Applications/MAMP/htdocs/linxtter3/storage/framework/views/2183381abd0870d662da5c08720fbe24c41369ed.php:12)
[stacktrace]
#0 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Engines/PhpEngine.php(45): Illuminate\View\Engines\CompilerEngine->handleViewException(Object(ErrorException), 0)
#1 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Engines/CompilerEngine.php(59): Illuminate\View\Engines\PhpEngine->evaluatePath('/Applications/M...', Array)
#2 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(142): Illuminate\View\Engines\CompilerEngine->get('/Applications/M...', Array)
#3 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(125): Illuminate\View\View->getContents()
#4 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/View.php(90): Illuminate\View\View->renderContents()
#5 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Http/Response.php(42): Illuminate\View\View->render()
#6 /Applications/MAMP/htdocs/linxtter3/vendor/symfony/http-foundation/Response.php(197): Illuminate\Http\Response->setContent(Object(Illuminate\View\View))
#7 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(727): Symfony\Component\HttpFoundation\Response->__construct(Object(Illuminate\View\View))
#8 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(699): Illuminate\Routing\Router::toResponse(Object(Illuminate\Http\Request), Object(Illuminate\View\View))
#9 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(659): Illuminate\Routing\Router->prepareResponse(Object(Illuminate\Http\Request), Object(Illuminate\View\View))
#10 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#11 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LaravelLocalizationViewPath.php(34): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#12 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath->handle(Object(Illuminate\Http\Request), Object(Closure))
#13 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#14 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LaravelLocalizationRedirectFilter.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#15 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter->handle(Object(Illuminate\Http\Request), Object(Closure))
#16 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#17 /Applications/MAMP/htdocs/linxtter3/vendor/mcamara/laravel-localization/src/Mcamara/LaravelLocalization/Middleware/LocaleSessionRedirect.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#18 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect->handle(Object(Illuminate\Http\Request), Object(Closure))
#19 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#20 /Applications/MAMP/htdocs/linxtter3/app/Http/Middleware/WhosOnline.php(42): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#21 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): App\Http\Middleware\WhosOnline->handle(Object(Illuminate\Http\Request), Object(Closure))
#22 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#23 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(41): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#24 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#25 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#26 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php(67): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#27 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\VerifyCsrfToken->handle(Object(Illuminate\Http\Request), Object(Closure))
#28 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#29 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/View/Middleware/ShareErrorsFromSession.php(49): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#30 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\View\Middleware\ShareErrorsFromSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#31 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#32 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Session/Middleware/StartSession.php(63): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#33 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Session\Middleware\StartSession->handle(Object(Illuminate\Http\Request), Object(Closure))
#34 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#35 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/AddQueuedCookiesToResponse.php(37): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#36 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse->handle(Object(Illuminate\Http\Request), Object(Closure))
#37 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#38 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Cookie/Middleware/EncryptCookies.php(59): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#39 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Cookie\Middleware\EncryptCookies->handle(Object(Illuminate\Http\Request), Object(Closure))
#40 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#41 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#42 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(661): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#43 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(636): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#44 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(602): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#45 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(591): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#46 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#47 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#48 /Applications/MAMP/htdocs/linxtter3/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(65): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#49 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure))
#50 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#51 /Applications/MAMP/htdocs/linxtter3/vendor/fideloper/proxy/src/TrustProxies.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#52 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#53 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#54 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#55 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#56 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#57 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#58 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#59 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#60 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#61 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#62 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#63 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(51): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#64 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#65 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#66 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#67 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#68 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#69 /Applications/MAMP/htdocs/linxtter3/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#70 /Applications/MAMP/htdocs/linxtter3/server.php(21): require_once('/Applications/M...')
#71 {main}
"} 
[2018-10-08 18:25:23] local.ERROR: Route [/] not defined. {"exception":"[object] (InvalidArgumentException(code: 0): Route [/] not defined. at /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/UrlGenerator.php:370)
[stacktrace]
#0 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Redirector.php(157): Illuminate\Routing\UrlGenerator->route('/', Array)
#1 /Applications/MAMP/htdocs/linxtter3/app/Http/Controllers/PageController.php(110): Illuminate\Routing\Redirector->route('/')
#2 [internal function]: App\Http\Controllers\PageController->createNewPage(Object(Illuminate\Http\Request))
#3 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Controller.php(54): call_user_func_array(Array, Array)
#4 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/ControllerDispatcher.php(45): Illuminate\Routing\Controller->callAction('createNewPage', Array)
#5 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Route.php(212): Illuminate\Routing\ControllerDispatcher->dispatch(Object(Illuminate\Routing\Route), Object(App\Http\Controllers\PageController), 'createNewPage')
#6 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Route.php(169): Illuminate\Routing\Route->runController()
#7 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(659): Illuminate\Routing\Route->run()
#8 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Routing\Router->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#9 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/SubstituteBindings.php(41): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#10 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\SubstituteBindings->handle(Object(Illuminate\Http\Request), Object(Closure))
#11 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#12 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Middleware/ThrottleRequests.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#13 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Routing\Middleware\ThrottleRequests->handle(Object(Illuminate\Http\Request), Object(Closure), 60, '1')
#14 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#15 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#16 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(661): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#17 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(636): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request))
#18 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(602): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route))
#19 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Router.php(591): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request))
#20 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(176): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request))
#21 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(30): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request))
#22 /Applications/MAMP/htdocs/linxtter3/vendor/barryvdh/laravel-debugbar/src/Middleware/InjectDebugbar.php(65): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#23 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure))
#24 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#25 /Applications/MAMP/htdocs/linxtter3/vendor/fideloper/proxy/src/TrustProxies.php(57): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#26 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure))
#27 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#28 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#29 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#30 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#31 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/TransformsRequest.php(31): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#32 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure))
#33 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#34 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/ValidatePostSize.php(27): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#35 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure))
#36 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#37 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Middleware/CheckForMaintenanceMode.php(51): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#38 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(151): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure))
#39 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Routing/Pipeline.php(53): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request))
#40 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Pipeline/Pipeline.php(104): Illuminate\Routing\Pipeline->Illuminate\Routing\{closure}(Object(Illuminate\Http\Request))
#41 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(151): Illuminate\Pipeline\Pipeline->then(Object(Closure))
#42 /Applications/MAMP/htdocs/linxtter3/vendor/laravel/framework/src/Illuminate/Foundation/Http/Kernel.php(116): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request))
#43 /Applications/MAMP/htdocs/linxtter3/public/index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request))
#44 /Applications/MAMP/htdocs/linxtter3/server.php(21): require_once('/Applications/M...')
#45 {main}
"} 

nhayder left a reply on Axios Returning 405 (Method Not Allowed)

@tykus now its giving me 500 (Internal Server Error) after removing the dot

i have this now

/api/newpage

this is the error

POST http://127.0.0.1:8000/api/newpage 500 (Internal Server Error)

nhayder started a new conversation Axios Returning 500 (Internal Server Error)

I'm trying to create new page with axios but im getting 500 (Internal Server Error).

This is my api route

Route::middleware('auth:api')->get('/user', function (Request $request) {

    return $request->user();

});

// rout to create new page
Route::post('/newpage', '[email protected]')->name('newPage');

on page controller

    public function createNewPage(Request $request)
    {

        $newPage = new Page();
        
        $newPage->name = $request['name'];
        $newPage->homepage = '0';
        $newPage->direction = $request['direction'];
        $newPage->language_id = $request['language_id'];
        $newPage->position = '0';
        $newPage->slug = str_slug($request['name']);

        $newPage->save();

        flash('success');
        
        Cache::forget('pageManager');
        Cache::forget('topMenu');
        
        return redirect()->route('/');
        
    }

my vue app.js i have this axios to create the page

        addNewPage : function(){

            axios.post('./api/newpage', {

                // data to send
                name        : this.name,
                direction   : this.direction,
                language_id : this.language_id,
            });


        }

what seems to e the problem??

nhayder left a reply on Vue Is Showing Data For Split Second

@tykus this is the vue code

Vue.component('left-menu', require('./components/LeftMenu.vue'));

const app = new Vue({

    el: '#designer',

    data: {

        show : true,
        isVisible : false,
        isEditable: false,
        isOpenL : true,
        isOpenR : false,

    },

    methods: {

        makeEditible : function(){

            this.isVisible = true;
            this.isEditable = true;

        },

        toggleLeftMenu : function(){

            this.isOpenL = !this.isOpenL


        },

        toggleRightMenu : function(){

            this.isOpenR = !this.isOpenR


        },

    }

});

nhayder started a new conversation Vue Is Showing Data For Split Second

I have made a custom modal in my app with tailwind and vue, the modal is included as blade partial on my main page.

<body class="bg-blue-lightest font-light leading-normal">
    
    <div id="designer">

        
        @yield('content')
        
        @include('admin.designer.ui.modals.left') // this is the modal


    </div>

    <script type="text/javascript" src="{{ mix('/js/designer.js') }}"></script>

</body>

what i'm finding out is that vue is showing the modal for split second before the page fully loads then it hides is it form the page.

Im guessing its because vue is not fully loaded yet.

So how can i hide the partial completely and show it only when i click the load modal button.

Any ideas.

nhayder left a reply on Passing Translated String To Vue App

@rockhopper72 i made some research and it looks like others are not using vue component for passing localization?

They simply are using blade partial and passing standard laravel translations string @lang('---') as it is, they also add vue app on the footer of that partial to control other parts of the app without the need to adding vue components.

This solutions is much better for me but i'm not sure that its recommended way to pass translation without 3rd party plugins??

07 Oct
2 months ago

nhayder started a new conversation Passing Translated String To Vue App

Im having some issues in passing some en + fr + ru translated strings to vue app.

What would be the best way to do this task

05 Oct
2 months ago

nhayder left a reply on Vue Is Not Showing Data On Blade Partial

@petrit This will definitely work, i have tried it before but i was trying to pass the data thought the iframe.

nhayder left a reply on Vue Is Not Showing Data On Blade Partial

@petrir Not there is not error, not in logs + chrome extension app ????

nhayder left a reply on Vue Is Not Showing Data On Blade Partial

Sorry about that i forgot to mention that partials are included in a page inserted using ifrom tags