chrisgrim

at Self Employed

Member Since 2 Years Ago

Petaluma

Experience Points
35,200
Total
Experience

4,800 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
142
Lessons
Completed
Best Reply Awards
0
Best Reply
Awards
  • start your engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-in-session Created with Sketch.

    School In Session

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

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

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

  • subscriber Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • evangelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

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

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

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

  • Community Pillar

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

Level 8
35,200 XP
Jan
19
2 days ago
Activity icon

Awarded Best Reply on Is It Possible To Switch From Fortify To Breeze

Ok I solved it with some help. At the bottom of the web.php should have been

require __DIR__.'/auth.php';

when I moved it over that was removed.

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

Ok I solved it with some help. At the bottom of the web.php should have been

require __DIR__.'/auth.php';

when I moved it over that was removed.

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

Yeah I did a fresh install and then moved stuff over.

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

Hmm still nothing. If I move

Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

from routes/auth.php to my web.php the route works. So it makes me thing that auth.php isn't being registered on boot. Do you know where that would happen?

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

When I run composer route:clear I get the error

  [Symfony\Component\Console\Exception\CommandNotFoundException]
  There are no commands defined in the "route" namespace.
Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

I have already transferred it but now I am having the issue with the routes/auth.php not registering

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

Hi @jlrdw The issue I was running into was the url routes were getting so convoluted with fortify. When I upgraded it became so hard to understand what path the user was going through the auth system.

Activity icon

Replied to Is It Possible To Switch From Fortify To Breeze

Ok I just reinstalled a clean laravel and then breeze and moved everything over that didn't include fortify or jetstream. I am hitting one issue. Laravel breeze installs a routes/auth.php file that has all of the auth routes. However when I head an auth route like test.com/login it doesn't redirect. This makes me think that routes/auth.php isn't being hit. Is there a way to check that?

Activity icon

Started a new Conversation Is It Possible To Switch From Fortify To Breeze

Hi, I updated my project to Laravel 8 and when I did it all they had available was fortify and jetstream, so I used fortify because jetstream added way to much other junk. I recently heard about breeze and realized that is exactly what I was looking for. Is there a simple way to switch from fortify to breeze without rebuilding the entire project again?

Jan
18
3 days ago
Activity icon

Started a new Conversation Struggling To Understand Vue 3 Structure

Hi, I am starting to build a new Vue / Laravel project and I am struggling with Vue 3.0. I am going to be making a larger application and I want to make sure I am setting it up correctly. My current way is I have a bunch of laravel blade files for product, review etc and inside each blade file I call a vue component

<vue-nav></vue-nav>
or 
<vue-category-show></vue-category-show>

and then inside my Vue app file I do

Vue.component('vue-nav', () => import(/* webpackChunkName: "assets/ls" */ './pages/layouts/nav.vue'));
Vue.component('vue-category-show', () => import(/* webpackChunkName: "assets/cs" */  './pages/categories/category-show.vue'));

and everything is under one new vue

if(document.getElementById("bodyArea")){
    const bodyArea = new Vue({
        el: '#bodyArea',
        store,
    });
}

However I am looking at Vue 3 and they want the new setup to look like

import { createApp } from 'vue';

import App from './pages/App.vue'
import Nav from './pages/Nav.vue'
import Login from './pages/auth/Login.vue'


createApp(App).mount("#app")
createApp(Nav).mount("#nav")
createApp(Login).mount("#login")

and each blade would have

<div id='nav'></div>
<div id="login"></div>

I cant figure out how to break them into chunks when calling this way so my app.js file is going to be huge. Am I setting up the project incorrectly? How can I have a ton of Vue single page components in different chunks like I did in Vue 2?

Activity icon

Replied to Is @extends Disappearing?

@jlrdw I am in a struggle trying to decide if I should learn laravel components more or just focus on Vue components more.

Activity icon

Replied to Is @extends Disappearing?

@tykus and @jlrdw Gotcha! Thanks so much. This is a great start for me to look into it more.

Activity icon

Replied to Is @extends Disappearing?

@tykus Ahh So do you think it would be better to switch and learn the new way?

Activity icon

Started a new Conversation Is @extends Disappearing?

When I installed laravel 8 with breeze I notice that there is a lot of

<x-guest-layout>
<x-auth-card>
<x-slot name="logo">
<x-auth-validation-errors class="mb-4" :errors="$errors" />

This refers to the x-guest-layout seems to refer to the layouts.guest file. Is this the new format for laravel instead of using @extends? Am I getting confused at the difference between these two things?

Jan
16
5 days ago
Activity icon

Replied to Returning User With Laravel 8 Login Route

This so totally it. I am looking at storing the review info as a cookie and just reloading the page.

Jan
15
6 days ago
Activity icon

Replied to Returning User With Laravel 8 Login Route

Hi @snapey I followed the netword error further and I found the issue is happening when I am getting the user and submitting the review for them. I will have to figure out why that is throwing the CSRF token mismatch. Thanks!

And @jlrdw I am trying to make it so a user can write a review without being logged in and then when the press submit it will popup a login window and when they login to their account it will then submit their review.

Activity icon

Replied to Returning User With Laravel 8 Login Route

When I see the network tab I get the error

CSRF token mismatch.
Activity icon

Replied to Returning User With Laravel 8 Login Route

Hi @snapey ok I added

public function toResponse($request)
    {
        Log::info($this->user);
        return $request->wantsJson() ? Log::info('wants json'): Log::info('doesnt want');
        return $request->wantsJson()
                    ? new JsonResponse(['user' => $this->user], 200)
                    : redirect(config('fortify.home'));
    }

and in the log it says

[2021-01-16 00:12:36] local.INFO: {"id":1,"name":"Chris Grim","email":"[email protected]","email_verified_at":"2020-05-28T17:26:35.000000Z","largeImagePath":"user-images\/chris-grim-74ae6f8\/chris-grim.webp","thumbImagePath":"user-images\/chris-grim-74ae6f8\/chris-grim-thumb.webp","gravatar":"https:\/\/www.gravatar.com\/avatar\/4f9c2b9e0a09ec8209d2041c0b669240?s=180","provider":null,"provider_id":null,"type":"a","newsletter_type":"n","silence":"y","unread":null,"created_at":"2020-05-28T17:26:29.000000Z","updated_at":"2021-01-15T19:56:31.000000Z","stripe_id":null,"card_brand":null,"card_last_four":null,"trial_ends_at":null,"reminder":"0","current_team_id":null,"profile_photo_path":null,"profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=Chris+Grim&color=7F9CF5&background=EBF4FF","hasCreatedOrganizers":true,"needsApproval":1,"needsOrgApproval":5,"hasMessages":true,"hexColor":"#DA5E8E"}  


[2021-01-16 00:12:36] local.INFO: wants json  

so shouldn't the new JsonResponse work?

Activity icon

Replied to Returning User With Laravel 8 Login Route

Hi @snapey I did a similar response for the RegisterResponse

<?php

namespace App\Http\Responses;

use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Response;
use Laravel\Fortify\Contracts\RegisterResponse as RegisterResponseContract;

class RegisterResponse implements RegisterResponseContract
{
    protected $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function toResponse($request)
    {
        return $request->wantsJson()
                    ? new JsonResponse(['user' => $this->user], 200)
                    : redirect(config('fortify.home'));
    }
}

my FortifyServiceProvider

public function boot()
    {
// register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\RegisterResponse::class,
            \App\Http\Responses\RegisterResponse::class
        );

        // register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\LoginResponse::class,
            \App\Http\Responses\LoginResponse::class
        );

and my store() method

public function store(Request $request,
                          CreatesNewUsers $creator): RegisterResponse
    {
        event(new Registered($user = $creator->create($request->all())));

        $this->guard->login($user);

        $user->getGravatar();

        return app(RegisterResponse::class, ['user' => $user]);
    }

and it worked. Is there a reason why the register works but the login doesn't?

Activity icon

Replied to Returning User With Laravel 8 Login Route

How would I do that? When I try the code I pasted above I get a csrf token mismatch.

Activity icon

Replied to Returning User With Laravel 8 Login Route

Hi @jlrdw I am doing a multi-part submission. The user fills out a form, then presses submit and it asks the user to login. After loggin it I want to return the users info and do another axios call to submit the form. In order for this to work I need to return the users info.

Activity icon

Replied to Returning User With Laravel 8 Login Route

Is it possible with Laravel 8 to return the user after a login axios call?

Jan
13
1 week ago
Activity icon

Replied to Best Way To Get Total Average Rating Of A Group Of Event's Ratings

This was very helpful! I changed my code a bit but pretty much you showed me the way!!

public function getShowRatingAttribute()
    {
        $ids = $this->events()->get()->pluck('id');
        return Rating::where('rateable_type', '=', Event::class)->whereIn('rateable_id', $ids)->average('rating');;
    }
Activity icon

Replied to Laravel 8 Register A User And Return User Info To Axios

Ah yeah I tried that but it gives me a CSRF token mismatch

Activity icon

Started a new Conversation Returning User With Laravel 8 Login Route

Hi All! I am trying to only return the user when I hit the login route for laravel 8. I followed this tutorial https://talltips.novate.co.uk/laravel/laravel-8-conditional-login-redirects and so I have a LoginResponse.php file inside my App/Http/Responses file with

<?php

namespace App\Http\Responses;

use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Response;
use Laravel\Fortify\Contracts\LoginResponse as LoginResponseContract;

class LoginResponse implements LoginResponseContract
{
    protected $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function toResponse($request)
    {
        return $request->wantsJson()
                    ? new JsonResponse(['user' => $this->user], 200)
                    : redirect(config('fortify.home'));
    }
}

Then in my providers/fortify file I have

public function boot()
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
        
        // register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\RegisterResponse::class,
            \App\Http\Responses\RegisterResponse::class
        );

        // register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\LoginResponse::class,
            \App\Http\Responses\LoginResponse::class
        );
    }

And so far I have tried in my authenticatedsessioncontroller file to add

use Illuminate\Support\Facades\Auth;
public function store(LoginRequest $request)
    {
        return $this->loginPipeline($request)->then(function ($request) {
            $user = Auth::user();
            return app(LoginResponse::class, ['user' => $user]);
        });
    }

however this isn't sending back the user and is giving me a CSRF token mismatch.". How do I go about just returning the user and not a redirect after login?

Jan
12
1 week ago
Activity icon

Replied to Laravel 8 Register A User And Return User Info To Axios

@marianomoreyra While I have you I was hoping I could ask one more question. I was looking to do the same thing with the LoginResponse.php returning the user model However I am getting stuck at where to add the login response. I created LoginResponse.php

<?php

namespace App\Http\Responses;

use App\Models\User;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Response;
use Laravel\Fortify\Contracts\LoginResponse as LoginResponseContract;

class LoginResponse implements LoginResponseContract
{
    protected $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function toResponse($request)
    {
        return $request->wantsJson()
                    ? new JsonResponse(['user' => $this->user], 200)
                    : redirect(config('fortify.home'));
    }
}

and then in my app/providers/fortifyserviceprovider I have

    public function boot()
    {
// register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\RegisterResponse::class,
            \App\Http\Responses\RegisterResponse::class
        );

        // register new LoginResponse
        $this->app->singleton(
            \Laravel\Fortify\Contracts\LoginResponse::class,
            \App\Http\Responses\LoginResponse::class
        );

however in my AuthenticatedSessionController when I do

public function store(LoginRequest $request)
    {
        return $this->loginPipeline($request)->then(function ($request) {
            return app(LoginResponse::class, ['user' => $user]);
        });
    }

it says undefined user variable

Activity icon

Started a new Conversation Best Way To Get Total Average Rating Of A Group Of Event's Ratings

Hi, I currently have it setup so I can rate my events using a Rateable trait and Rating Model. Rateable Trait

trait Rateable
{
    public function ratings()
    {
        return $this->morphMany(Rating::class, 'rateable')->orderBy('created_at', 'desc')->limit(5);
    }
public function getAverageRatingAttribute()
    {
        return $this->averageRating();
    }
public function averageRating()
    {
        return number_format($this->ratings()->avg('rating'), 1);
    }

and my event model

class Event extends Model
{
    use Rateable;


    protected $appends = ['averageRating',];

This works great but I also have an an organizer event relationship where an organizer has many events and an event has one organizer. I am looking for the best and most memory efficient way to combine all the ratings for any of the events owned by an organizer and get the average of that. I am guessing I will do something like

/**
    * Each Organizer can have many events
    *
    * @return \Illuminate\Database\Eloquent\Relations\HasMany
    */
    public function events() 
    {
        return $this->hasMany(Event::class);
    }

    /**
    * Get Organizer Rating
    *
    * @return rating
    */
    public function getShowRatingAttribute()
    {
	//maybe use a foreach?
        return $this->events()->get()->averageRating();
    }

Besides just figuring out how to do it I am also worried that it could really create a memory suck if there are 10 events and each of those events have 50 reviews.

Activity icon

Replied to Laravel 8 Register A User And Return User Info To Axios

@marianomoreyra Worked first time! Thank you so much for taking the time to explain it out.

Activity icon

Replied to Laravel 8 Register A User And Return User Info To Axios

Thanks so much for your explanation @marianomoreyra I will give this a shot!

Jan
11
1 week ago
Activity icon

Started a new Conversation Laravel 8 Register A User And Return User Info To Axios

Hi, I was hoping someone could help me understand the new laravel 8 registration. Snapey was kind enough to create this document https://talltips.novate.co.uk/laravel/laravel-8-conditional-login-redirects but I am struggling to understand it. I am submitting a registration with axios and I would love to just send back the user. If I add this to my RegisteredUserController.php

public function store(Request $request,
                          CreatesNewUsers $creator): RegisterResponse
    {
        event(new Registered($user = $creator->create($request->all())));

        $this->guard->login($user);

        $user->getGravatar();

        return $user;

        //return app(RegisterResponse::class);
    }

I get the error

Return value of Laravel\Fortify\Http\Controllers\RegisteredUserController::store() must be an instance of Laravel\Fortify\Contracts\RegisterResponse, instance of App\Models\User returned

Is it possible for someone to dumb down the RegisterResponse for me?

Jan
04
2 weeks ago
Activity icon

Replied to How To Deal With Nulls In A Clean Way In Vue

Hi @tippin and @marianomoreyra I will look into optional chaining but Object assign is definitely a great way to clean it up! Thanks so much!

Activity icon

Started a new Conversation How To Deal With Nulls In A Clean Way In Vue

Hi, I am writing out an address where I am not sure I will have all the parts. Currently I generate the address like

let home = this.event.location.home ? this.event.location.home : ''
let street = this.event.location.street ? this.event.location.street : ''
let city = this.event.location.city ? this.event.location.city : ''
let region = this.event.location.region ? this.event.location.region : ''
let country = this.event.location.country ? this.event.location.country : ''
let zip = this.event.location.postal_code ? this.event.location.postal_code : ''
if (this.event.location.hiddenLocationToggle) {
     this.location = `${city}, ${region}`;
} else {
     this.location = `${home}${street} ${city}, ${region} ${country} ${zip}`
}

this seems like a poor way to write code though and I am sure there is a better way.

Dec
23
4 weeks ago
Activity icon

Replied to Issue With SortBy And GroupBy With Collection

It’s actually pulling from elastic search but I can’t do the sorting there because I am doing a multi indices search

Activity icon

Started a new Conversation Issue With SortBy And GroupBy With Collection

Hi, I am using an elastic search plugin which returns results in a collection. I am trying to sort the results of the returned collection but I am having some issues. The returned collection looks like

(5) [{…}, {…}, {…}, {…}, {…}]
0: {model: {…}, index_name: "city_lists", document: {…}, highlight: null, score: 1}
1: {model: {…}, index_name: "city_lists", document: {…}, highlight: null, score: 1}
2: {model: {…}, index_name: "city_lists", document: {…}, highlight: null, score: 1}
3: {model: {…}, index_name: "city_lists", document: {…}, highlight: null, score: 1}
4: {model: {…}, index_name: "events", document: {…}, highlight: null, score: 1}
length: 5
__proto__: Array(0)

The ultimate goal is to have a multi level sorting. Top level would be by index_name so I would have events at the top of the list and then city_lists. Then going one step further I was hoping to sort the city_lists by population. which is inside the model objects. Here is an example of one of the city_lists model objects

country: "CN"
created_at: "2020-09-02T22:26:24.000000Z"
id: 88311
latitude: "31.60000000"
longitude: "117.86667000"
name: "Chaohu, CN"
population: 138463
rank: 1
updated_at: "2020-09-02T22:26:24.000000Z"

Is this possible? I have tried both

return $searchResult->matches()->sortByDesc('index_name');
return $searchResult->matches()->sortBy('index_name');

and both times events was at the bottom of the list.

Dec
14
1 month ago
Activity icon

Replied to Simplest Way To Update MorphMany Database With Model Location Change

This is super cool. I will definitely use the command

Activity icon

Started a new Conversation Simplest Way To Update MorphMany Database With Model Location Change

Hi I recently updated to Laravel 8 and moved all of my models into the App\Models. I do like the organization but I ran into an issue with my database. Anywhere I have a morphMany it has

App\Show 

and is pointing to the wrong folder. I tried in mysql

USE EI;

UPDATE tickets SET ticket_type = REPLACE(ticket_type, "App\Show","App\Models\Show" );

EI is my database and tickets is my table and the ticket_type is the column. It says it ran correctly but the values don't change. Is there a different way I should be doing this?

Activity icon

Replied to How Does Class NameSpace Work With Relations

@tippin You are right! They are saved in the old location in my database. Thank you so much for saving me hours!

Activity icon

Started a new Conversation How Does Class NameSpace Work With Relations

Hi, In my original project I had all of my models in the app directory. I had two models, ticket and show that had a morphMany relationship. In my controller I was able to do

$tickets = $event->shows()->first()->tickets()->orderBy('ticket_price')->get();

and it would return the tickets associated with the first show of the event. However I recent updated to Laravel 8 and moved all my models to the App/Models folder. I thought I went through and updated all the name spaces but the morph many isn't working. My current Ticket.php looks like

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Ticket extends Model
{
    /**
    * What protected variables are allowed to be passed to the database
    *
    * @var array
    */
	protected $fillable = ['name','ticket_price','ticket_id', 'ticket_type', 'description','type', 'currency'];
    
	/**
     * Ticket Belongs to the Show Model
     *
     * @return \Illuminate\Database\Eloquent\Relations\belongsTo
     */
    public function ticket()
    {
        return $this->morphTo();
    }

and my current shows looks like

<?php

namespace App\Models;

use Carbon\Carbon;
use Illuminate\Database\Eloquent\Model;
use App\Scopes\DateScope;

class Show extends Model
{
    /**
    * What protected variables are allowed to be passed to the database
    *
    * @var array
    */
	protected $fillable = ['date','event_id'];

	/**
     * Show Model belongs to the Event Model
     *
     * @return \Illuminate\Database\Eloquent\Relations\belongsTo
     */
    public function event() 
    {
        return $this->belongsTo(Event::class);
    }
    
    /**
     * Each Show has many tickets 
     *
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function tickets() 
    {
        return $this->morphMany(Ticket::class, 'ticket');
    }

Do I need to update morphMany(Ticket::class, 'ticket')?

I was never really quite clear how the namespace worked for this. Thanks!

Activity icon

Replied to Passing Request Object Into When Builder

Amazing! I didn't know I could change

->when($request->lat, function ($builder, $request) 

Thank you!

Activity icon

Started a new Conversation Passing Request Object Into When Builder

Hi, I am trying to setup a custom search

$eventFilter = Event::boolSearch()
->must('range', ['closingDate' => [ 'gte' => 'now/d']])
->when($request->lat, function ($builder, $request) {
            return $builder->filter('geo_distance', ['distance' => '40km', 'location_latlon' => [
                'lat' => $request->lat,
                'lon' => $request->lng,
            ]]);
        })

if I do

return $request->lat;

I get 40.71427. If I do

return $request->lng;

I get -74.00597. However if I try to use the when() code above to pass the request into the builder I get the error

Trying to get property 'lat' of non-object

How would I pass the request data into the builder?

Dec
07
1 month ago
Activity icon

Replied to Click In Vue Parent Component To Run Method In Child Component?

This video is amazing! Thanks so much

Activity icon

Replied to Click In Vue Parent Component To Run Method In Child Component?

Ok Ill watch that, but I guess the big take away is to see if I can get the button into my child.

Activity icon

Started a new Conversation Click In Vue Parent Component To Run Method In Child Component?

Hi! In my parent component I have a submit button

<button @click="onSubmit">
            submit
</button>

and I want users clicking that button to run a method on my child component.

Currently the way I have it working is to have a method in the parent:

onSubmit() {
            this.ifSubmit = true;
},

which goes to

<vue-limited-run 
:event="event"
:submit="ifSubmit" />

then in my child component I have a watcher

watch: {
            submit() {
                if( this.submit ) { this.onSubmit('tickets') }
            },
        },

This works but for one it seems like a janky way to do it and for two it doesn't work if submission doesn't work the first time (validation catch) because the value is now already true. Is there a correct way to pass the click down to the child component?

Activity icon

Started a new Conversation Why Isnt Value In Child Component Being Updated?

Hi All, I have a parent and child component. In the parent I have

<vue-limited-show-dates 
                        :event="event"
                        :submit="ifSubmit"
                        :showType="showType"
                        :loadStartDate="startDate"
                        :loadEndDate="endDate"
                        :timezones="timezones" />

and in the child I have

 props: ['event', 'timezones', 'showType', 'submit', 'loadStartDate', 'loadEndDate'],

data() {
            return {
                startDate: this.loadStartDate,
                endDate: this.loadEndDate,
            }
        },

When the page loads I can see that the parent startDate, endDate has a value and the loadStartDate, loadendDate props have a value but the child startDate, endDate are empty.

Thanks

Dec
03
1 month ago
Activity icon

Replied to Best Way To Break Big Vue File Into Seperate Templates?

Hi @tray2 Is there a way to break the template area into 4 files but have them all have access to the script section of the main file?

Activity icon

Started a new Conversation Best Way To Break Big Vue File Into Seperate Templates?

Hi, I have a file that gives users 4 different ways to add data in the template but the underlying data is always the same. Is there a way to break it into 4 different templates that behave like mixins? The templates can access all of the data and objects in the main file without having to pass data into a component?

here is my file though it might be a bit overwhelming.

<template>
    <div class="event-create__shows">
        <section class="">
            <div class="listing-details-block">
                <div class="title">
                    <h2>Dates and Times</h2>
                </div>
                <input 
                    style="opacity:0;position:absolute;top:0;" 
                    autofocus>
                <div class="show-type-selection">
                    <div class="field">
                        <label> Select all show dates</label>
                        <v-select 
                            v-model="showType"
                            label="name"
                            :options="showTypeOptions" 
                            :clearable="false"
                            placeholder="Show hours type"
                            @search:blur="active = null"
                            @search:focus="checkStatus"
                            @input="$v.showType.$touch"
                            :class="{ active: active == 'type','error': $v.$error }">
                            <template #option="{ name, description }">
                                <h3 style="margin: 0">{{ name }}</h3>
                                <em>{{ description }}</em>
                            </template>
                        </v-select>
                    </div>
                </div>
                
                <!-- Limited Run (Specific Dates) -->
                <div 
                    v-show="showType.id == 1" 
                    class="specific-show-dates">
                    <section class="event-enter-showdates">
                        <div class="field">
                            <label> Select each individual show date</label>
                            <div class="calendar desktopshow">
                                <flat-pickr
                                    v-model="dates"
                                    :config="calendarConfig"
                                    ref="datePicker"                                              
                                    class="form-control"
                                    @on-value-update="onDateChange" 
                                    :events="eventsToBeEmitted"
                                    placeholder="Select date"   
                                    name="dates" />
                            </div>
                            <div class="calendar mobileshow">
                                <flat-pickr
                                    v-model="dates"
                                    :config="calendarConfig"
                                    ref="datePicker"
                                    @on-value-update="onDateChange" 
                                    :events="eventsToBeEmitted"                                           
                                    class="form-control"
                                    placeholder="Select date"        
                                    name="dates" />
                            </div>
                            <div v-if="$v.dates.$error" class="validation-error">
                                <p class="error" v-if="!$v.dates.required">Please add at least 1 show date</p>
                            </div>
                            <div>
                                <label v-if="dateArray && dates">({{ dateArray.length }} dates selected)</label>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <label> Show Timezone </label>
                            <multiselect 
                                v-model="timezone" 
                                deselect-label="Can't remove this value" 
                                track-by="name"
                                :class="{ active: active == 'timezone','error': $v.timezone.$error }"
                                @click="active = 'timezone'"
                                @blur="active = null"
                                label="description" 
                                placeholder="Select timezone"
                                @input="$v.timezone.$touch"
                                :options="timezones" 
                                :allow-empty="false">
                                <template slot="singleLabel" slot-scope="{ option }">
                                    <strong>{{ option.description }}</strong>
                                </template>
                            </multiselect>
                            <div v-if="$v.timezone.$error" class="validation-error">
                                <p class="error" v-if="!$v.timezone.ifOnDemand">Please include timezone of show</p>
                            </div>
                        </div>
                    </section>
                    <section class="event-enter-showtimes">
                        <div class="field">
                            <label> Show Times</label>
                            <textarea 
                                v-model="showTimes"
                                class="create-input area"
                                :class="{ active: active == 'times','error': $v.showTimes.$error }"
                                rows="8" 
                                :placeholder="placeholders" 
                                required
                                @click="active = 'times'"
                                @blur="active = null"
                                @input="$v.showTimes.$touch"
                                autofocus />
                            <div v-if="$v.showTimes.$error" class="validation-error">
                                <p class="error" v-if="!$v.showTimes.required">Please give a brief description of show times</p>
                                <p class="error" v-if="!$v.showTimes.maxLength">Show time is too long</p>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <label> Does the event have a specific embargo date? <br> (i.e. The date you would like it to first appear on EI) </label>
                            <div id="cover">
                                <input 
                                    @input="$v.showEmbargoDate.$touch" 
                                    v-model="showEmbargoDate" 
                                    type="checkbox" 
                                    id="checkbox">
                                <div id="bar" />
                                <div id="knob">
                                    <p v-if="showEmbargoDate">
                                        Yes
                                    </p>
                                    <p v-else>
                                        No
                                    </p>
                                </div>
                            </div>
                            <div v-if="showEmbargoDate">
                                <div class="embargo-calendar">
                                    <flat-pickr
                                        v-model="embargoDate"
                                        :config="embargoCalendarConfig"
                                        ref="datePicker"
                                        @on-value-update="onDateChange" 
                                        :events="eventsToBeEmitted"                                          
                                        class="form-control"
                                        placeholder="Select date"               
                                        name="dates" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
           
                <!-- Limited Dates -->
                <div v-show="showType.id == 2" class="limited-show-dates">
                    <section class="event-enter-showdates">
                        <div class="field limited__calender">
                            <label> Select the first day your weekly shows begin</label>
                            <div class="embargo-calendar">
                                <flat-pickr
                                    v-model="startDate"
                                    :config="embargoCalendarConfig"
                                    ref="datePicker"                                              
                                    class="form-control"
                                    @on-value-update="onDateChange" 
                                    :events="eventsToBeEmitted"
                                    placeholder="Select date"    
                                    name="dates" />
                            </div>
                            <div v-if="$v.limit.$error" class="validation-error">
                                <p class="error" v-if="!$v.limit.ifLimit">Please select a start and end date</p>
                                <p class="error" v-if="!$v.limit.correctRange">The start date must be before the end date</p>
                            </div>
                        </div>
                        <div class="field limited__calender">
                            <label> Select the last day your weekly shows ends</label>
                            <div class="embargo-calendar">
                                <flat-pickr
                                    v-model="endDate"
                                    :config="embargoCalendarConfig"
                                    ref="datePicker"                                              
                                    class="form-control"
                                    @on-value-update="onDateChange" 
                                    :events="eventsToBeEmitted"
                                    placeholder="Select date"    
                                    name="dates" />
                            </div>
                            <div v-if="$v.limit.$error" class="validation-error">
                                <p class="error" v-if="!$v.limit.ifLimit">Please select a start and end date</p>
                                <p class="error" v-if="!$v.limit.correctRange">The start date must be before the end date</p>
                            </div>
                        </div>
                        <div class="field ongoing-show-dates">
                            <label> Select show days</label>
                            <div class="week-calendar grid">
                                <div
                                    class="week-calendar__day" 
                                    :class="{ active: week.mon }" 
                                    @click="addWeekDay('mon')">
                                    <h4>Mon</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.tue }" 
                                    @click="addWeekDay('tue')">
                                    <h4>Tue</h4>
                                </div>
                                <div 
                                    class="week-calendar__day" 
                                    :class="{ active: week.wed }" 
                                    @click="addWeekDay('wed')">
                                    <h4>Wed</h4>
                                </div>
                                <div 
                                    class="week-calendar__day" 
                                    :class="{ active: week.thu }" 
                                    @click="addWeekDay('thu')">
                                    <h4>Thu</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.fri }" 
                                    @click="addWeekDay('fri')">
                                    <h4>Fri</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.sat }"
                                    @click="addWeekDay('sat')">
                                    <h4>Sat</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.sun }"
                                    @click="addWeekDay('sun')">
                                    <h4>Sun</h4>
                                </div>
                            </div>
                            <div v-if="$v.week.$error" class="validation-error">
                                <p class="error" v-if="!$v.week.ifWeekly">Please select at least one day</p>
                            </div>
                        </div>
                    </section>
                    <section class="ongoing-show-dates">
                        <div class="field">
                            <label> Show Timezone </label>
                            <multiselect 
                                v-model="timezone" 
                                deselect-label="Can't remove this value" 
                                track-by="name"
                                :class="{ active: active == 'timezone','error': $v.timezone.$error }"
                                @click="active = 'timezone'"
                                @blur="active = null"
                                label="description"
                                @input="$v.timezone.$touch"
                                placeholder="Select timezone" 
                                :options="timezones" 
                                :allow-empty="false">
                                <template slot="singleLabel" slot-scope="{ option }">
                                    <strong>{{ option.description }}</strong>
                                </template>
                            </multiselect>
                            <div v-if="$v.timezone.$error" class="validation-error">
                                <p class="error" v-if="!$v.timezone.ifOnDemand">Please include timezone of show</p>
                            </div>
                        </div>
                    </section>
                    <section class="event-enter-showtimes ongoing-show-dates">
                        <div class="field">
                            <label> Show Times</label>
                            <textarea 
                                v-model="showTimes" 
                                class="create-input area"
                                :class="{ active: active == 'times','error': $v.showTimes.$error }"
                                rows="8" 
                                :placeholder="placeholdero" 
                                required
                                @click="active = 'times'"
                                @blur="active = null"
                                @input="$v.showTimes.$touch"
                                autofocus />
                            <div v-if="$v.showTimes.$error" class="validation-error">
                                <p class="error" v-if="!$v.showTimes.required">Please give a brief description of show times</p>
                                <p class="error" v-if="!$v.showTimes.maxLength">Show time is too long</p>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <label> Does the event have a specific embargo date? <br> (i.e. The date you would like it to first appear on EI) </label>
                            <div id="cover">
                                <input 
                                    @input="$v.showEmbargoDate.$touch" 
                                    v-model="showEmbargoDate" 
                                    type="checkbox" 
                                    id="checkbox">
                                <div id="bar" />
                                <div id="knob">
                                    <p v-if="showEmbargoDate">
                                        Yes
                                    </p>
                                    <p v-else>
                                        No
                                    </p>
                                </div>
                            </div>
                            <div v-if="showEmbargoDate">
                                <div class="embargo-calendar">
                                    <flat-pickr
                                        v-model="embargoDate"
                                        :config="embargoCalendarConfig"
                                        ref="datePicker"
                                        @on-value-update="onDateChange" 
                                        :events="eventsToBeEmitted"                                        
                                        class="form-control"
                                        placeholder="Select date"               
                                        name="dates" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

                <!-- Open Ended (Weekly) Dates -->
                <div v-show="showType.id == 3" class="ongoing-show-dates">
                    <section class="event-enter-showdates">
                        <div class="field">
                            <label> Select show days</label>
                            <div class="week-calendar grid">
                                <div
                                    class="week-calendar__day" 
                                    :class="{ active: week.mon }" 
                                    @click="addWeekDay('mon')">
                                    <h4>Mon</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.tue }" 
                                    @click="addWeekDay('tue')">
                                    <h4>Tue</h4>
                                </div>
                                <div 
                                    class="week-calendar__day" 
                                    :class="{ active: week.wed }" 
                                    @click="addWeekDay('wed')">
                                    <h4>Wed</h4>
                                </div>
                                <div 
                                    class="week-calendar__day" 
                                    :class="{ active: week.thu }" 
                                    @click="addWeekDay('thu')">
                                    <h4>Thu</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.fri }" 
                                    @click="addWeekDay('fri')">
                                    <h4>Fri</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.sat }"
                                    @click="addWeekDay('sat')">
                                    <h4>Sat</h4>
                                </div>
                                <div 
                                    class="week-calendar__day"
                                    :class="{ active: week.sun }"
                                    @click="addWeekDay('sun')">
                                    <h4>Sun</h4>
                                </div>
                            </div>
                            <div v-if="$v.week.$error" class="validation-error">
                                <p class="error" v-if="!$v.week.ifWeekly">Please select at least one day</p>
                            </div>
                        </div>
                        <div v-show="showStartDate" class="field">
                            <label> Select the first day your weekly shows begin</label>
                            <div class="embargo-calendar">
                                <flat-pickr
                                    v-model="startDate"
                                    :config="embargoCalendarConfig"
                                    ref="datePicker"                                              
                                    class="form-control"
                                    @on-value-update="onDateChange" 
                                    :events="eventsToBeEmitted"
                                    placeholder="Select date"    
                                    name="dates" />
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <label> Show Timezone </label>
                            <multiselect 
                                v-model="timezone" 
                                deselect-label="Can't remove this value" 
                                track-by="name"
                                :class="{ active: active == 'timezone','error': $v.timezone.$error }"
                                @click="active = 'timezone'"
                                @blur="active = null"
                                label="description"
                                @input="$v.timezone.$touch"
                                placeholder="Select timezone" 
                                :options="timezones" 
                                :allow-empty="false">
                                <template slot="singleLabel" slot-scope="{ option }">
                                    <strong>{{ option.description }}</strong>
                                </template>
                            </multiselect>
                            <div v-if="$v.timezone.$error" class="validation-error">
                                <p class="error" v-if="!$v.timezone.ifOnDemand">Please include timezone of show</p>
                            </div>
                        </div>
                    </section>
                    <section class="event-enter-showtimes">
                        <div class="field">
                            <label> Show Times</label>
                            <textarea 
                                v-model="showTimes" 
                                class="create-input area"
                                :class="{ active: active == 'times','error': $v.showTimes.$error }"
                                rows="8" 
                                :placeholder="placeholdero" 
                                required
                                @click="active = 'times'"
                                @blur="active = null"
                                @input="$v.showTimes.$touch"
                                autofocus />
                            <div v-if="$v.showTimes.$error" class="validation-error">
                                <p class="error" v-if="!$v.showTimes.required">Please give a brief description of show times</p>
                                <p class="error" v-if="!$v.showTimes.maxLength">Show time is too long</p>
                            </div>
                        </div>
                    </section>
                    <section>
                        <div class="field">
                            <label> Does the event have a specific embargo date? <br> (i.e. The date you would like it to first appear on EI) </label>
                            <div id="cover">
                                <input 
                                    @input="$v.showEmbargoDate.$touch" 
                                    v-model="showEmbargoDate" 
                                    type="checkbox" 
                                    id="checkbox">
                                <div id="bar" />
                                <div id="knob">
                                    <p v-if="showEmbargoDate">
                                        Yes
                                    </p>
                                    <p v-else>
                                        No
                                    </p>
                                </div>
                            </div>
                            <div v-if="showEmbargoDate">
                                <div class="embargo-calendar">
                                    <flat-pickr
                                        v-model="embargoDate"
                                        :config="embargoCalendarConfig"
                                        ref="datePicker"                                              
                                        class="form-control"
                                        @on-value-update="onDateChange" 
                                        :events="eventsToBeEmitted"
                                        placeholder="Select date"               
                                        name="dates" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                
                <div 
                    v-show="showType.id == 4" 
                    class="everyday-show-dates">
                    <section class="event-enter-showtimes">
                        <div class="field">
                            <label> Show Times</label>
                            <textarea 
                                v-model="showTimes" 
                                class="create-input area"
                                :class="{ active: active == 'times','error': $v.showTimes.$error }"
                                rows="8" 
                                :placeholder="placeholdera" 
                                required
                                @click="active = 'times'"
                                @blur="active = null"
                                @input="$v.showTimes.$touch"
                                autofocus />
                            <div v-if="$v.showTimes.$error" class="validation-error">
                                <p class="error" v-if="!$v.showTimes.required">Please give a brief description of show times</p>
                                <p class="error" v-if="!$v.showTimes.maxLength">Show time is too long</p>
                            </div>
                        </div>
                    </section>
                    <section class="event-enter-showdates">
                        <div class="field" style="margin-top:6rem">
                            <label> Does the event have a specific embargo date? <br> (i.e. The date you would like it to first appear on EI) </label>
                            <div id="cover">
                                <input 
                                    @input="$v.showEmbargoDate.$touch" 
                                    v-model="showEmbargoDate" 
                                    type="checkbox" 
                                    id="checkbox">
                                <div id="bar" />
                                <div id="knob">
                                    <p v-if="showEmbargoDate">
                                        Yes
                                    </p>
                                    <p v-else>
                                        No
                                    </p>
                                </div>
                            </div>
                            <div v-if="showEmbargoDate">
                                <div class="embargo-calendar">
                                    <flat-pickr
                                        v-model="embargoDate"
                                        :config="embargoCalendarConfig"
                                        ref="datePicker"
                                        @on-value-update="onDateChange" 
                                        :events="eventsToBeEmitted"                                             
                                        class="form-control"
                                        placeholder="Select date"               
                                        name="dates" />
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </section>
        <Submit 
            @submit="onSubmit"
            :disabled="disabled" 
            previous="category"
            next="tickets" 
            :event="event" />
        <transition name="slide-fade">
            <div v-if="updated" class="updated-notifcation">
                <p>Your event has been updated.</p>
            </div>
        </transition>
        <modal v-if="modal" @close="modal = false">
            <div slot="header">
                <div class="circle del">
                    <p>?</p>
                </div>
            </div>
            <div slot="body"> 
                <h3>Changing the type of dates?</h3>
                <p>Changing the show run type will require the event to be reapproved.</p>
            </div>
            <div slot="footer">
                <button class="btn del" @click="onResubmit()">Change</button>
            </div>
        </modal>
    </div>
</template>

<script>
    import formValidationMixin from '../../mixins/form-validation-mixin'
    import _ from 'lodash'
    import { required, minLength, minValue, maxLength } from 'vuelidate/lib/validators'
    import flatPickr from 'vue-flatpickr-component'
    import 'flatpickr/dist/flatpickr.css'
    import Multiselect from 'vue-multiselect'
    import Submit  from './components/submit-buttons.vue'


export default {
    props: ['event', 'timezones'],

    mixins: [formValidationMixin],

    components: { flatPickr, Multiselect, Submit},

    computed: {
        endpoint() {
            return `/create/${this.event.slug}/shows`
        },

        navSubmit() {
            return this.$store.state.navurl
        },

        published() {
            return this.event.status == 'p' || this.event.status == 'e' ? true : false;
        },

        dateArray() {
            if(!Array.isArray(this.dates) && this.dates.includes(",")) {
                this.ready = true;
                return this.dates.split(",");
            } else {
                if(!Array.isArray(this.dates)) {
                    this.ready = true;
                    return [this.dates];
                } else {
                    return null;
                }
            }
        },

        weeklyOngoing() {
            if (this.week.mon == 0) {return true}
            if (this.week.tue == 0) {return true}
            if (this.week.wed == 0) {return true}
            if (this.week.thu == 0) {return true}
            if (this.week.fri == 0) {return true}
            if (this.week.sat == 0) {return true}
            if (this.week.sun == 0) {return true}
            return false;
        },

        submitObject() {
            return {
                'dates': Array.isArray(this.dates) ? this.dates : this.dateArray,
                'showtimes': this.showTimes,
                'embargo_date' : this.showEmbargoDate ? this.embargoDate : null,
                'week':  this.showType.id == '2' && this.showType.id == '3' ? _.mapValues(this.week, () => true) : this.week,
                'shows': this.showType.id == '1',
                'limited' : this.showType.id == '2',
                'onGoing' : this.showType.id == '3',
                'always': this.showType.id == '4',
                'start_date': this.startDate ? this.startDate : null,
                'end_date': this.endDate ? this.endDate : null,
                'timezone': this.timezone,
                'resubmit': this.resubmit,
            }
        },

    },

    data() {
        return {
            eventUrl:`/create/${this.event.slug}`,
            showType: [],
            dates: this.event.shows ? this.event.shows.map(a => a.date) : '',
            startDate: '',
            endDate: '',
            embargoDate: this.event.embargo_date ? this.event.embargo_date : '',
            showEmbargoDate: this.event.embargo_date ? true : false,
            calendarConfig: this.initializeCalendarObject(),
            embargoCalendarConfig: this.initializeEmbargoCalendarObject(),
            week: this.event.show_on_going ? this.event.show_on_going : this.initializeWeekObject(),
            showTimes: this.event.shows.length ? this.event.show_times : '',
            disabled: false,
            active: null,
            modal: false,
            placeholders: 'Please provide a brief description of show times. For example:' + '\n' + '\n' + '“Doors at 7, Show at 8.”' + '\n' + '“Two shows an hour from 8-10.”',
            placeholdero: 'Please provide a brief description of weekly show times. For example:' + '\n' + '\n' + '10:00PM shows on Monday & Tuesday.' + '\n' + '12:00PM on Wednesday and Thursday.',
            placeholdera: 'Please provide a brief description of daily times. For example:' + '\n' + '\n' + 'Show begins everyday at 12PM.' + '\n' + 'Enjoy at any time.',
            showTypeOptions: [
                {   id: 1, name: 'Select Dates (Specific Dates)', description:'Your show has specific performance dates.'},
                {   id: 2, name: 'Limited Run (A range of dates, by day of week)', description:'Your show has an opening date and a closing date, and may have dark days each week.'}, 
                {   id: 3, name: 'Open Ended (Weekly)', description:'Your show recurs regularly and has no end date in the next 6 months, and may have dark days each week.'}, 
                {   id: 4, name: 'Ongoing', description:'Your show has no closing date and is available to do by audience members 24/7, with no dark dates. '}],
            exit: false,
            showStartDate: this.event.show_on_going ? true : false,
            timezone: this.event.timezone ? this.event.timezone : '',
            updated: false,
            resubmit: false,
            ready: false,
            eventsToBeEmitted : ['onReady', 'onChange','onValueUpdate']
        }
    },

    methods: {

        onLoad() {
            axios.get(this.onFetch('shows'))
            .then(res => {
                res.data.dates ? this.dates = res.data.dates : '';
                res.data.week ? this.week = res.data.week : '';
                res.data.showTimes ? this.showTimes = res.data.showTimes : '';
                if (this.event.showtype == 'l') {
                    this.endDate = res.data.dates[0]
                    this.startDate = res.data.dates[res.data.dates.length - 1]
                }
                if (this.event.showtype == 'o') {
                    this.startDate = res.data.dates[res.data.dates.length - 1]
                }
            });
            if (this.event.showtype == 's') { return this.showType = this.showTypeOptions[0]}
            if (this.event.showtype == 'l') { return this.showType = this.showTypeOptions[1]}
            if (this.event.showtype == 'o') { return this.showType = this.showTypeOptions[2]}
            if (this.event.showtype == 'a') { return this.showType = this.showTypeOptions[3]}
        },

        async onSubmit(value) {
            if ( this.checkForChanges() ) { return this.onForward(value) }
            if (this.checkVuelidate()) { return false }
            await axios.post(this.endpoint, this.submitObject)
            value == 'save' ? this.save() : this.onForward(value);
        },

        onDateChange() {
            if (this.ready) this.$v.week.$touch()
        },

        addWeekDay(day) {
            this.$v.week.$touch();
            this.showStartDate = true;
            this.week[day] = !this.week[day];
        },

        checkStatus() {
            if ((this.event.status == 'p' || this.event.status == 'e') && this.resubmit == false) this.modal = true
        },

        onResubmit() {
            this.resubmit = true;
            this.approved = false;
            this.modal = false;
        },

        initializeCalendarObject() {
            return {
                maxDate: new Date().fp_incr(180),
                mode: "multiple",
                inline: true,
                showMonths: window.innerWidth < 768 ? 1 : 2,
                dateFormat: 'Y-m-d H:i:s',     
            }
        },

        initializeEmbargoCalendarObject() {
            return {
                minDate: "today",
                maxDate: new Date().fp_incr(180),
                mode: "single",
                inline: true,
                showMonths: 1,
                dateFormat: 'Y-m-d H:i:s',     
            }
        },

        initializeWeekObject() {
            return {
                mon: false,
                tue: false,
                wed: false,
                thu: false,
                fri: false,
                sat: false,
                sun: false,
            }
        },

        initializeShowtimeObject() {
            return {
                hh: "00",
                mm: "00",
                A: "PM",
            }
        },
    },

    watch: {
        navSubmit() {
             this.checkForChanges() ? this.onBack(this.navSubmit) : this.onSubmit(this.navSubmit);
        },

    },

    mounted() {
        this.onLoad();
        setTimeout(() => this.$refs.datePicker.fp.jumpToDate(new Date()), 100);
    },

    validations: {
        showType: {

        },
        showTimes: {
            required,
            maxLength: maxLength(1000)
        },
        dates: {
            ifDates() { 
                return this.showType.id == '1' ? this.dates.length ? true : false : true
            },
        },
        limit: {
            ifLimit() {
                return this.showType.id == '2' ? this.startDate && this.endDate  ? true : false : true
            },
            correctRange() {
                return this.showType.id == '2' ? this.startDate < this.endDate  ? true : false : true
            }
        },
        week: {
            ifWeekly() {
                return this.showType.id == '2' || this.showType.id == '3' ? this.week.mon == 1 || this.week.tue == 1 || this.week.wed == 1 || this.week.thu == 1 || this.week.fri == 1 || this.week.sat == 1 || this.week.sun == 1  ? true : false : true
            }
        },
        timezone: {
            ifOnDemand() {
                return this.showType.id == '4' ? true : (this.timezone ? true : false)
            }
        },
        showEmbargoDate: {

        },
    },
}  
</script>
Dec
01
1 month ago
Activity icon

Replied to Optimizing Vue Code

Perfect!

Activity icon

Replied to Optimizing Vue Code

Hmm When I try to do

data() {
            return {
                event: this.loadevent,
                comments: '',
                commentsActive: false,
                dis: false,
                buttons: [
                    { click: this.onEditOrganizer(), name: 'Organizer' },
                    { click: this.onBack(), name: 'Go Back' },
                    { click: this.onRejected(), name: 'Reject' },
                ],
            }
        },

It doesn't load my data at all