chrisgrim

chrisgrim

Member Since 1 Year Ago

Petaluma

at Self Employed

Experience Points 19,820
Experience Level 4

180 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 132
Lessons
Completed
Best Reply Awards 0
Best Reply
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.

25 May
1 day ago

chrisgrim left a reply on Cleaner Way To Write My Save Image Code?

Oh nice! That is great to see it laid out like this.

chrisgrim started a new conversation Cleaner Way To Write My Save Image Code?

Hi, When I am storing an image my code gets pretty icky. I have moved it to the model from the controller but even then it seems wordy and non-simple. I was wondering if anyone had their own code for storing and image that was simple and pretty.

    public function saveFile($request)
    {
        $title = str_slug(request('title'));
        $extension = $request->file('header-image')->getClientOriginalExtension();
        $filename = $title.'.'.$extension;
        $request->file('header-image')->storeAs('/public/postimages', $filename);
        $large = storage_path().'/app/public/postimages/'.$filename;
        $small = storage_path().'/app/public/thumbimages/'.'thumb'.'-'.$filename;
        Image::make($large)->resize(1200, null, function ($constraint) {
                $constraint->aspectRatio();
            })->save($large)->resize(600, null, function ($constraint) {
                $constraint->aspectRatio();
            })->save($small);
        $post = Post::create([
            'post_image_path' => 'postimages/' . $filename,
            'thumb_image_path' => 'thumbimages/'.'thumb'.'-'.$filename,
        ]);
        return redirect('/');
    }
22 May
4 days ago

chrisgrim started a new conversation In Forms Checking For Old Value Or Using Variable

Hi, I have a update form and I am trying to figure something out. I am already populating the update form value with

value="{{$post->title}}"

However, I would love to combine that with

value="{{ old('title') }}"

I tried

value="{{ old('title') or $post->title }}"

but all I get is the number 1.

How do I display the variable data, but if the form submission gets a validation error, then show the old('title') that they just entered?

Thanks!

chrisgrim left a reply on Validation Request Question

I tried that but it let it go through on both create and update without catching there was no header-image.

chrisgrim started a new conversation Validation Request Question

Hi,

I created a request controller to check a form submission. I am using the same request for both the store and update. The issue I am having is I want to require an image for the create, but not for the update. I have tried this in my request controller

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class PostStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'required|unique:posts,id'.$this->id,
            'content' => 'required',
            'seo_meta' => 'required',
            'header-image' => Rule::requiredIf(function () use ($this) {
                return $this->post_image_path == null;
            }),
        ];
    }
}

but I am getting the error back "Cannot use $this as lexical variable"

14 May
1 week ago

chrisgrim left a reply on Working With Pagination And Infinite Loading

Hi @maverickchan

So you don't pass any variable props to the component? Instead you get the json by axios?

13 May
1 week ago

chrisgrim started a new conversation Working With Pagination And Infinite Loading

Hi, I am trying to setup infinite loading in my Vue component. I realized that I needed to combine pagination with the infinite loading so it knows where to stop and start with pulling in more events as the user scrolls. I added pagination and immediately hit an issue. Pagination no longer just sends the events like get() does. When I do a return of $events with pagination I get

{
"current_page": 1,
"data": [],
"first_page_url": "http://showbelow.test?page=1",
"from": 1,
"last_page": 2,
"last_page_url": "http://showbelow.test?page=2",
"next_page_url": "http://showbelow.test?page=2",
"path": "http://showbelow.test",
"per_page": 4,
"prev_page_url": null,
"to": 4,
"total": 8
}

I am pulling event in like this <event-listing :events="{{$events}}"></event-listing> but that no longer works. I am sort of stuck. Do I need to send the data as JSON? Here is my vue component file for event-listing

<template>
    <div>
        <a v-if="isGuest" class="btn" href="/login">Please login</a>
        <div v-if="isLoggedIn">
            <button @click="setUserEmail(`updated-${loggedInUser.email}`)"> Update Email </button>
            <div>user email : {{ loggedInUser.email }}</div>
        </div>  
        <h2>Our Latest Events</h2>
        <div id="app">
            <div id="grid-section">
                <div>
                    <multiselect 
                    v-model="value" 
                    placeholder="Filter by name"
                    label="eventTitle" 
                    track-by="eventTitle" 
                    deselectLabel=''
                    @keyup="filteredEvents"
                    :allow-empty="false"  
                    :options="searchOptions" 
                    >
                    </multiselect>
                </div>
                <div>
                    <input type="text" placeholder="Filter by Price">
                    <button>Go</button>
                </div>
                <div>
                     <div class="datepicker-trigger">
                      <input
                        type="text"
                        id="datepicker-trigger"
                        placeholder="Select dates"
                        :value="formatDates(dateOne, dateTwo)"
                      >

                      <AirbnbStyleDatepicker
                        :trigger-element-id="'datepicker-trigger'"
                        :mode="'range'"
                        :fullscreen-mobile="true"
                        :date-one="dateOne"
                        :date-two="dateTwo"
                        @date-one-selected="val => { dateOne = val }"
                        @date-two-selected="val => { dateTwo = val }"
                      />
                    </div>
                </div>
            </div>
            
            <div id="grid-section">
                <div v-for="event in filteredEvents">
                    <event-listing-item :user="user" :event="event"></event-listing-item>
                </div>
            </div>
            <div id="grid-section">
                <div v-for="event in list">
                    <event-listing-item :user="user" :event="event"></event-listing-item>
                </div>
                <infinite-loading @infinite="infiniteHandler"></infinite-loading>
            </div>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash';
    import Multiselect from 'vue-multiselect';
    import format from 'date-fns/format';
    import usersMixin from '../../mixins/users.js';
    import InfiniteLoading from 'vue-infinite-loading';

    const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

    export default {
        props: {
            events: { type:Array },
            user: { type:Object },
        },

        mixins: [
            usersMixin,
        ],

        components: {
            Multiselect,
            InfiniteLoading,
        },

        data() {
            return {
                allEvents: this.events,
                value: '',
                searchOptions: this.events,
                 dateFormat: 'D MMM',
                dateOne: '',
                dateTwo: '',
                list: [],
            }
        },

        computed: {
            filteredEvents(){
                if( !this.value ) {return this.allEvents;}
                    const search = this.value.eventTitle.toLowerCase().trim();
                    return this.events.filter(c => c.eventTitle.toLowerCase().indexOf(search) > -1);
            }
        },

        methods: {

            initializeEventObject() {
                return {
                    id: '',
                    eventTitle: '',
                }
            },

            infiniteHandler($state) {
                    const data = this.events;
                    if (data) {
                      this.list = this.list.concat(data);
                      $state.loaded();
                    } else {
                      $state.complete();
                    };
            },

            formatDates(dateOne, dateTwo) {
                let formattedDates = ''
                if (dateOne) {
                    formattedDates = format(dateOne, this.dateFormat)
                }
                if (dateTwo) {
                    formattedDates += ' - ' + format(dateTwo, this.dateFormat)
                }
                    return formattedDates
            },

        }
    };
</script>

Thanks

chrisgrim started a new conversation Origin 'site.name' Has Been Blocked By CORS Policy:

I am trying to setup infinite scrolling with this tutorial https://jsfiddle.net/PeachScript/a4Lxbf9w/

However I am getting an issue with CORS. I get the error

Access to XMLHttpRequest at 'http://hn.algolia.com/api/v1/search_by_date?tags=story&page=1' from origin 'http://showbelow.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

I tried adding Access-Control-Allow-Origin to my method but I am still getting the error.

infiniteHandler($state) {
                axios.get(api, {
                    headers: {
                          'Access-Control-Allow-Origin': '*',
                        },
                    params: {
                        page: this.page,
                    },
                }).then(({ data }) => {
                    if (data.hits.length) {
                        this.page += 1;
                        this.list.push(...data.hits);
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                });
            },
10 May
2 weeks ago

chrisgrim left a reply on How To Pass User Info Into Vue

@nasmed This is great! Thank you so much for all the info!!! That is a really good suggestion about the users data being visible.

09 May
2 weeks ago

chrisgrim left a reply on How To Pass User Info Into Vue

I understand that. I am trying to understand if there is a workflow if I want to use @guest and @auth inside a vue component.

chrisgrim started a new conversation How To Pass User Info Into Vue

Hi, In my Blade file I was using @guest and @auth to show certain divs that guests or users could see. I am transfering the work I have done over to Vue and I am wondering what to do about this? If I try to pass

:user="{{ auth()->user() }}

to my component I can get it working, but that breaks the moment there isn't an auth user. I get an error for trying to v:bind empty data. Is there an easy way to get the same @guest and @auth in Vue as I had in the blade file?

Thanks so much

07 May
2 weeks ago

chrisgrim left a reply on Struggling With Image Submission From Vue To Laravel

Hi @wilk_randall

You were right. It seems like I can only post. Thanks!

06 May
2 weeks ago

chrisgrim left a reply on Struggling With Image Submission From Vue To Laravel

When I look at the first tutorial everything he talks about with base64 images only seems to focus around the validation, not the actual storing of the file. I am not validating anything at all so shouldn't it work?

I tried changing up my code based on the second tutorial to look like this

createImage() {
            let data = new FormData();
            data.append('eventImage', this.eventImage);
            const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }

            console.log(this.eventImage);

            axios.patch(`${this.eventUrl}/images`, data, config)
            .then(response => {
                // all is well. move on to the next page
                console.log(response.data);
            });
        },

but I am still getting a response that there was no file.

chrisgrim started a new conversation Struggling With Image Submission From Vue To Laravel

I am trying to submit an image from vue to laravel but having an issue. In my Vue file I have

createImage() {
            let data = new FormData();
            data.append('eventImage', this.eventImage);
            let headers = {'Content-Type': 'application/x-www-form-urlencoded'};

            console.log(this.eventImage);

            axios.patch(`${this.eventUrl}/images`, data, headers)
            .then(response => {
                // all is well. move on to the next page
                console.log(response.data);
            });
        },

When I run the createImage() method the console.log shows this so I know I have a file

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/4QBaRXhpZgAATU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAGXKADAAQAAAABAAAEOAAAAAAAAP/bAEMAAgICAgICBAICBAYEBAQGCAYGBgYICggICAgICgwKCgoKCgoMDAwMDAwMDA4ODg4ODhAQEBAQEhISEhISEhISEv/bAEMBAwMDBQQFCAQECBMNCw0TExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTExMTE//AABEIBDgGXAMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/3QAEAGb/2gAMAwEAAhEDEQA/APyg2gqfz/Sn9+Rz70wAKOmSeMGlXj5sGvsz82YDcT1A+lABI459aBwcn8Mf0p46hB+ANBLGBSMFjnnr2p3Q7gMYHUUuDgNmnYwCKBXGYwB78nvSgZG0jPqaTBxz0FL8vp6e1AXAKQOByB0 and so on

Then in my controller I have

public function storeImages(Request $request, Event $event)
    {
        if ($request->hasFile('eventImage')) {
            return response()->json(['success' => 'Has File']);
        } else {
            return response()->json(['failed' => 'No File']);
        }
    }

So far, no matter what I do when I submit I get the response failed:No File. In my event.php class I have

 protected $fillable = [
         'eventImage',

    ];

Am I missing something? I can see the file in the console log right before it is submitted, but my controller is telling me that it does not have the file 'eventImage'.

05 May
3 weeks ago

chrisgrim left a reply on Vue Issue With Submitting A Slug

Amazing, thanks so much for helping me understand responses. I have been trying to get them working for any errors that are generated.

chrisgrim left a reply on Vue Issue With Submitting A Slug

Hi @edoc

I haven't really been able to figure out returned responses. So in my laravel controller I would have

$event->update(request()->validate([
            'eventTitle' => 'required',
        ]) + ['slug'=> str_slug(request('eventTitle'))]);
        return response()->json(compact('slug'));

and then I am not really sure what to do in my Vue file. Something like this?

axios.patch(`${this.eventUrl}/title`, data)
                .then(response => {
                    //then how would I pull the slug from the response here?  
                })

chrisgrim started a new conversation Vue Issue With Submitting A Slug

Hi All,

I am allowing users to change the title of their event which changes the event-slug at the same time. I had the edit form working great in Laravel but I have decided to move everything to Vue components. Now I am getting an issue I can't figure out how to solve.

When I submit the title my controller stores the title and then str_slug(title) to store the slug. The issue I am having is that when I then do a window.location.href after submit it uses the old slug stored in vue instead of using the latest one just created on submit. So I get a 404 error.

<template>
    <div>
        <div class="create-guide-title">
        <h2> What is the Title of your Event?</h2>
        </div>
        <div>
            <p>Make it a good one!</p>
        </div>
        <div class="floating-form">
            <div class="floating-label">
                <input type="text" class="floating-input" v-model="eventTitle" placeholder=" " required>
                <label>Title</label>
            </div>
        </div>
        <div class="">
            <button @click.prevent="submitTitle()" class="create"> Next </button>
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            event: { type:Object },
        },

        data() {
            return {
                eventTitle: this.event.eventTitle,
                eventUrl:_.has(this.event, 'slug') ? `/create-your-event/${this.event.slug}` : null
            }
        },

        methods: {

            submitTitle() {
                let data = {};
                data.eventTitle = this.eventTitle;

                axios.patch(`${this.eventUrl}/title`, data);
                window.location.href = `${this.eventUrl}/photo`;
            }
        }
    };

</script>

Here is the code I am using. How do I make Vue use my latest event slug as the href?

Thanks!

26 Apr
1 month ago

chrisgrim left a reply on Trouble Understanding How A Vue Plugin Is Working

I tried adding the :key="1" and :key="2" and it did the trick! Thanks so much

25 Apr
1 month ago

chrisgrim left a reply on Trouble Understanding How A Vue Plugin Is Working

Hi All,

@dunsti I have tried adding the render: h=> h(app),

but @maverickchan is right, it isn't needed.

@tomi

How exactly would I add the :key prop? Would I say that it is two different ids?

Thanks Chris

chrisgrim started a new conversation Trouble Understanding How A Vue Plugin Is Working

Hi, I am using the air bnb date picker vue plugin in my project. It works great until I try to have two versions on the same page. I want a user to be able to click to add one date and then click a second date.

Following the instructions I loaded it into my app.js file like so

// import component and stylesheet
import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker'

import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'

// make sure we can use it in our components
// see docs for available options
const datepickerOptions = {}

// make sure we can use it in our components
Vue.use(AirbnbStyleDatepicker, datepickerOptions)

I then created a new vue component called create-datepicker and inside there I was able to get it working by using this code

<template>
  <div>
    <div class="datepicker-trigger">
      <input
        type="text"
        id="datepicker-trigger"
        placeholder="Select dates"
        :value="formatDates(dateOne, dateTwo)"
      >

      <AirbnbStyleDatepicker
        :trigger-element-id="'datepicker-trigger'"
        :mode="'range'"
        :fullscreen-mobile="true"
        :date-one="dateOne"
        :date-two="dateTwo"
        @date-one-selected="val => { dateOne = val }"
        @date-two-selected="val => { dateTwo = val }"
      />
    </div>
  </div>
</template>

<script>
import format from 'date-fns/format'

export default {
  data() {
    return {
      dateFormat: 'D MMM',
      dateOne: '',
      dateTwo: ''
    }
  },
  methods: {
    formatDates(dateOne, dateTwo) {
      let formattedDates = ''
      if (dateOne) {
        formattedDates = format(dateOne, this.dateFormat)
      }
      if (dateTwo) {
        formattedDates += ' - ' + format(dateTwo, this.dateFormat)
      }
      return formattedDates
    }
  }
}
</script>

Then I tried to edit the code so I could have two different date pickers like so

<template>
  <div>
    <div class="datepicker-trigger">
        <input
            type="text"
            id="datepicker-trigger"
            placeholder="Select dates"
            :value="formatFirstDate(dateOne)"
        >
        <AirbnbStyleDatepicker
            :trigger-element-id="'datepicker-trigger'"
            :closeAfterSelect="false"
            :mode="'single'"
            :monthsToShow="1"
            :fullscreen-mobile="true"
            :startOpen="true"
            :date-one="dateOne"
            @date-one-selected="val => { dateOne = val }"
        />
    </div>
    <div class="datepicker-trigger">
        <input
            type="text"
            id="datepicker-trigger1"
            placeholder="Select dates"
            :value="formatSecondDate(dateTwo)"
        >
        <AirbnbStyleDatepicker
            :trigger-element-id="'datepicker-trigger1'"
            :closeAfterSelect="false"
            :mode="'single'"
            :monthsToShow="1"
            :fullscreen-mobile="true"
            :startOpen="true"
            :date-two="dateTwo"
            @date-two-selected="val => { dateTwo = val }"
        />
    </div>
    </div>
</template>

<script>
import format from 'date-fns/format'


export default {
  data() {
    return {
      dateFormat: 'D MMM',
      dateOne: '',
      dateTwo: ''
    }
  },
    methods: {
        formatFirstDate(dateOne) {
            let formattedDates = ''
                if (dateOne) {
                    formattedDates = format(dateOne, this.dateFormat)
                } 
            return formattedDates
        },

        formatSecondDate(dateTwo) {
            let formattedDates = ''
                if (dateTwo) {
                    formattedDates = format(dateTwo, this.dateFormat)
                } 
            return formattedDates
        },
    },
}
</script>

It does show two date pickers but when I click on one of them and select a date the other one disappears. How do I make two complete standalone versions?

Thanks!

21 Apr
1 month ago

chrisgrim left a reply on Vue Order Of Computing A Method Issue

Actually I spoke too soon. I was able to get it to work with another watcher:

watch: {
            countryData: function(data) {
                if (data.length) {
                    return this.selectedArray = data.filter((country) => {
                    return this.keyword.toLowerCase().split(' ').every(v => country.name.toLowerCase().includes(v));
                    });
                }
            },

            selectedArray: function(data) {
                if (data.length) {
                    return this.selectedCountry = this.selectedArray[0];
                }
            }
        },

Is there any negative to doing it this way?

chrisgrim left a reply on Vue Order Of Computing A Method Issue

Hi @maverickchan I tried that new code but I am still having an issue. The strange thing is in my multiselect I can see the actual name of the country, but when I submit I get an error saying undefined. I did a quick test to see what was wrong. I created a button that when clicked console.logs this.selectedCountry. I wanted to see what was loaded after page load vs if I selected a country from the list.

<button @click.prevent="console()">Test</button>

-----

console() {
                console.log(this.selectedCountry);
            },

What I discovered was when I selected a country and then pressed my test button it returned an object. However when I load the page and it runs the the watch: and returns an array instead of an object. Inside that array is the object.

Is there an alternative to .every() where it just grabs the first?

Thanks!

chrisgrim left a reply on Vue Order Of Computing A Method Issue

hi @maverickchan You are right, something still isn't working. How would I incorporate immediate:true into my watch:? If I add it like I have below it doesn't seem to work still.

watch: {
immediate : true,           
countryData: function(data) {
                if (data.length) {
                    return this.selectedCountry = data.filter((country) => {
                    return this.keyword.toLowerCase().split(' ').every(v => country.name.toLowerCase().includes(v)) ;
                    });
                }
            }
        },

chrisgrim left a reply on Struggling With A Complicated Tagging ManyToMany Relationship

Ha sometimes you just need a fresh pair of eyes! That did it. Here is the code I used to get it working

$genres = $request->eventGenre;
        foreach ($genres as $genre) {
            Genre::firstOrCreate(['genre' => $genre]);
        }

        $newSync = Genre::all()->whereIn('genre', $genres);

        $event->genres()->sync($newSync);

Thanks so much!

20 Apr
1 month ago

chrisgrim started a new conversation Struggling With A Complicated Tagging ManyToMany Relationship

Hi All, I am struggling with adding the ability to store and select genre tags. I feel like I am close but I am struggling with some core issues. In my vue file I have a multi-select that allows users to either select tags or add new ones. The input his here

<div>
                <label class="typo__label">Tagging</label>
                <multiselect 
                v-model="genreName" 
                tag-placeholder="Add this as new tag" 
                placeholder="Search or add a tag" 
                label="genre" 
                track-by="id" 
                :options="options" 
                :multiple="true" 
                :taggable="true" 
                tag-position="bottom"
                @tag="addTag"
                ></multiselect>
                <pre class="language-json"><id>{{ genreName  }}</id></pre>
            </div>

If you create a new tag using the multiselect it creates the object and adds it to a data array with their own generated id using this method.

addTag (newTag) {
                const tag = {
                    genre: newTag,
                    id: newTag.substring(0, 0) + Math.floor((Math.random() * 10000000))
                }
                this.options.push(tag)
                this.genreName.push(tag)
            },

So If I add two tags 'test1' and 'test2' I get this


    "genre": "test1",
    "id": "6727027"
  },
  {
    "genre": "test2",
    "id": "8204582"
  }

I then submit that data to my controller using an array. In my controller so far I have setup

public function updateDescription(Request $request, Event $event)
    {
      
        $genres = $request->genre;
        foreach ($genres as $genre) {
            $event->genres()->firstOrCreate(['genre' => $genre]);
        }

I have a manyToMany relation between events and genres with an event_genre pivot table setup. What I have works great until the user goes back into the multiselect and removes one of the tags. I did a bunch of research and discovered sync() which is supposed to be the solution for this but I am running into a road block with that. If I use sync, it is looking for an id with the 'genre'. I don't believe laravel would like my passing along ids created by the multiselect that look like this '8204582'. If anyone has any ideas, I am sorta stuck. Thanks!

19 Apr
1 month ago

chrisgrim left a reply on Vue Order Of Computing A Method Issue

I asked on Stack and someone suggested using a watcher

watch: {
    countryData: function(data) {
        if (data.length) {
            console.log(data);
        }
    }
}

chrisgrim left a reply on Vue Order Of Computing A Method Issue

Hi @maverickchan,

I tried doing the countryFilter method doing created() or mounted() but here is the issue I am having. Right now during created() I run a method called get countries list

created() {
            this.getCountriesList();
        },

This does an axios call and gets a list of countries and saves them to data called countrydata

getCountriesList() {
                axios.get('https://restcountries.eu/rest/v2/all?fields=name')
                .then(axiosResult => this.countrydata = axiosResult.data) 
            },

Just for testing sake I tried mounting a simple method that console.logs the countrydata

countryFilteredList() {
                console.log(this.countrydata);
            },

and that is called with

mounted() {
            this.countryFilteredList()
            
        }

When I look in console I get this

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

However if I make a button that onclick calls the same countryfilteredlist() method then I get

(250) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
[100 … 199]
[200 … 249]

If I can't even console.log the data with mounted or created, then there is no way to filter it is there? This is why I was trying to call it on submit.

Thanks!

18 Apr
1 month ago

chrisgrim left a reply on Vue Order Of Computing A Method Issue

Hi @ashraam

The error I get is undefined for this.selectedCountry.name. So when I do

  let data = {
                'eventCity': this.city,
                'eventCountry': this.selectedCountry.name,
                };

nothing is sent through to eventCountry. Yet after the submit() method has fully run if I check in my vue dev tools selectedCountry now exists. If I submit the data again it would work. This is telling me that my countryFilteredList() method is running but it doesn't store the selectedCountry data until after the submit() method has finished.

Is this the correct behavior? Shouldn't the countryFilteredList() run fully and store the data before moving onto the next step of the submit method?

Thanks

chrisgrim started a new conversation Vue Order Of Computing A Method Issue

Hi, I am having a bit of an issue with how Vue runs methods. I have a form that submits an address to my database. One of the data points is the country and I am having an issue when I resubmit the form a second time.

The problem I am having is that I am calling a method in my submit method but it doesn't run fully and save the data until after the form has already tried to submit. So this.selectedCountry isn't saved to my data until after it submits. Shouldn't Vue methods run in cascading order? I would assume it would run CountryFilteredList() which would then save the filter country to my data this.selectedCountry and then it would let data= {}. Instead the this.selectedCountry isn't added until after the submit() method has completely finished.

In my template I have

<div class="">
            <button @click.prevent="submit()" class="create"> Next </button>
        </div>

In my submit() method I have

submit() {
                this.countryFilteredList();

                let data = {
                'eventCity': this.city,
                'eventCountry': this.selectedCountry.name,
                };

          
                console.log(data);
                axios.patch('/create-your-event/' + this.event.slug + '/location', data).catch(error => {
                module.status = error.response.data.status;
                });
            },

and for my countryFilteredList() method

countryFilteredList() {
                return this.selectedCountry = this.countrydata.filter((country) => {
                    return this.keyword.toLowerCase().split(' ').every(v => country.name.toLowerCase().includes(v)) ;
                });
            },

Thanks!

chrisgrim left a reply on Filtering Through Array For Specific Name

Thanks so much! That did the trick!

chrisgrim started a new conversation Filtering Through Array For Specific Name

Hi, two questions here. First is if I am doing this a stupid over complicated way and second, why is the way I am trying not working?

I have a selector dropdown that allows a user to choose a country. In my vue this country is saved to data as an object. I then get the country.name from the object and save that to the database. This works great. The issue I am having is I want to repopulate the data if the user goes back to the form except now I no longer have an object, only the country name as a string.

My idea is that I should filter through the countries array searching for the name. Is that the smartest way of doing this? My second question (if this is the right way to do this) is what am I doing wrong with my code?

in my data for simplicity sake I have

keyword: 'Afghanistan',
countrydata: [],

when the page loads my country data looks like this

countrydata:Array[250]
0:Object
name:"Afghanistan"
1:Object
name:"Åland Islands"
2:Object
name:"Albania"

and so on

The country data is loaded using a mounted method that pulls it from restcountries.com. Finally I have my computed property which isn't working

computed: {
            countryFilteredList() {
                return this.countrydata.name.filter((country) => {
                    return this.keyword.toLowerCase().split(' ').every(v => country.title.toLowerCase().includes(v));
                });
            }
        },

Thanks!

17 Apr
1 month ago

chrisgrim left a reply on Issue Getting Specific Data From An Array

I looked into importing a library but I think I found an even cleaner way of doing it

data.eventRegion = this.region.map(a => a.id);

that seems to do the trick!

16 Apr
1 month ago

chrisgrim left a reply on Issue Getting Specific Data From An Array

@jlrdw sorry! it seems to take me a while to get these concepts down. I guess I thought I could "pluck" it. I will play with the loop and try to get that working.

chrisgrim left a reply on Issue Getting Specific Data From An Array

That did work but it only gave me the id for that one region. I need to pass an array with the ids only. I tried

data.eventRegion = this.region.id;

but that gave me an error of eventRegion: undefined

chrisgrim left a reply on Issue Getting Specific Data From An Array

Hi @impeto

If I add

'eventRegion': this.region.[0].id,

When NPM tries to compile it I get this error

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/Chris/code/showbelow/resources/js/components/location-create.vue: Unexpected token (107:31)

  105 |             submit() {
  106 |                 let data = {
> 107 |                 'eventRegion': this.region.[0].id,
      |                                            ^

In case it is in the wrong place, the up arrow is pointing at the first bracket in front of the 0

chrisgrim started a new conversation Issue Getting Specific Data From An Array

Hi All, I have an issue that is driving me crazy cause it seems like it should work. I have region array

data() {
            return {
                region: [],
            }
        },

After I have selected and loaded my data I see this in my vue chrome dev tools

region:Array[3]
0:Object
created_at:"2019-04-16 13:51:01"
id:1
location:"LA"
updated_at:"2019-04-16 13:51:04"
1:Object
created_at:"2019-04-16 13:51:19"
id:2
location:"NY"
updated_at:"2019-04-16 13:51:24"
2:Object
created_at:"2019-04-16 13:51:22"
id:3
location:"SF"
updated_at:"2019-04-16 13:51:26"

I am trying to submit the id to my controller like this so I can just get the ids

submit() {
                let data = {
                'eventRegion': this.region.id,
                };
                console.log(data);
                axios.patch('/create-your-event/' + this.event.slug + '/location', data).catch(error => {
                module.status = error.response.data.status;
                });
            },

However when I look at the log data I get eventRegion: undefined. If I use

'eventRegion': this.region,

I see in the log data

eventRegion: Array(2)
0:
created_at: (...)
id: (...)
location: (...)
updated_at: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get created_at: ƒ reactiveGetter()
set created_at: ƒ reactiveSetter(newVal)
get id: ƒ reactiveGetter()
set id: ƒ reactiveSetter(newVal)
get location: ƒ reactiveGetter()
set location: ƒ reactiveSetter(newVal)
get updated_at: ƒ reactiveGetter()
set updated_at: ƒ reactiveSetter(newVal)
__proto__: Object
1:
created_at: (...)
id: (...)
location: (...)
updated_at: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get created_at: ƒ reactiveGetter()
set created_at: ƒ reactiveSetter(newVal)
get id: ƒ reactiveGetter()
set id: ƒ reactiveSetter(newVal)
get location: ƒ reactiveGetter()
set location: ƒ reactiveSetter(newVal)
get updated_at: ƒ reactiveGetter()
set updated_at: ƒ reactiveSetter(newVal)
__proto__: Object

Why can't I pull just the id and pass it to my controller? I have been able to do it with other data arrays.

chrisgrim left a reply on Passing Variable From Props To Data With Specific Layout

I figured it out. I had to change the name:newTag in this

addTag (newTag) {
                const tag = {
                    name: newTag,
                }
                this.options.push(tag)
                this.value.push(tag)
            },

to location:newTag

chrisgrim started a new conversation Passing Variable From Props To Data With Specific Layout

Hi, I am trying to figure out how to pass arrays correctly. In my data I can hard code

data() {
            return {
                value: [],
                options: [
                    { name: 'NYC'},
                    { name: 'LA' },
                    { name: 'SF' },
                    ],
            }
        },

Then when I use this method()

addTag (newTag) {
                const tag = {
                    name: newTag,
                }
                this.options.push(tag)
                this.value.push(tag)
            },

it works great. My next step was to pass a variable $regions into my vue component. In my blade file I have

<location-create :regions="{{$regions}}" />

Then in my vue component I have

export default {
        props: {
            regions: {
                type:Array,
            },
        },

Then what I tried to do was

data() {
            return {
                value: [],
                options: this.regions.location,
            }
        },

However I get options undefined. However if I do

options: this.regions

I get an array of options like this

options:Array[3]
0:Object
created_at:"2019-04-16 13:51:01"
id:1
location:"LA"
updated_at:"2019-04-16 13:51:04"
1:Object
created_at:"2019-04-16 13:51:19"
id:2
location:"NY"
updated_at:"2019-04-16 13:51:24"
2:Object
created_at:"2019-04-16 13:51:22"
id:3
location:"SF"
updated_at:"2019-04-16 13:51:26"

How can I get just the location from this array and then pass it to my addtag() method? Thanks!

chrisgrim left a reply on How To Parse Data With Vue Axios Reponse

This is perfect and it really helped me understand what is happening! Thanks @t

chrisgrim started a new conversation How To Parse Data With Vue Axios Reponse

Hi, I am doing an axios call to get a list of countries for a dropdown. Right now when I click a button it triggers this method.

getCountriesList() {
    axios.get('https://restcountries.eu/rest/v2/all')
    .then(function(axiosTestResult) {
        let data = axiosTestResult.data;
        console.log(data);
        })
    },

This returns a list like

[0 … 99]
0: {name: "Afghanistan", topLevelDomain: Array(1), alpha2Code: "AF", alpha3Code: "AFG", callingCodes: Array(1), …}
1: {name: "Åland Islands", topLevelDomain: Array(1), alpha2Code: "AX", alpha3Code: "ALA", callingCodes: Array(1), …}
2: {name: "Albania", topLevelDomain: Array(1), alpha2Code: "AL", alpha3Code: "ALB", callingCodes: Array(1), …}
3: {name: "Algeria", topLevelDomain: Array(1), alpha2Code: "DZ", alpha3Code: "DZA", callingCodes: Array(1), …}
4: {name: "American Samoa", topLevelDomain: Array(1), alpha2Code: "AS", alpha3Code: "ASM", callingCodes: Array(1), …}
5: {name: "Andorra", topLevelDomain: Array(1), alpha2Code: "AD", alpha3Code: "AND", callingCodes: Array(1), …}
6: {name: "Angola", topLevelDomain: Array(1), alpha2Code: "AO", alpha3Code: "AGO", callingCodes: Array(1), …}
7: {name: "Anguilla", topLevelDomain: Array(1), alpha2Code: "AI", alpha3Code: "AIA", callingCodes: Array(1), …}
8: {name: "Antarctica", topLevelDomain: Array(1), alpha2Code: "AQ", alpha3Code: "ATA", callingCodes: Array(1), …}
9: {name: "Antigua and Barbuda", topLevelDomain: Array(1), alpha2Code: "AG", alpha3Code: "ATG", callingCodes: Array(1), …}
10: {name: "Argentina", topLevelDomain: Array(1), alpha2Code: "AR", alpha3Code: "ARG", callingCodes: Array(1), …}
11: {name: "Armenia", topLevelDomain: Array(1), alpha2Code: "AM", alpha3Code: "ARM", callingCodes: Array(1), …}
12: {name: "Aruba", topLevelDomain: Array(1), alpha2Code: "AW", alpha3Code: "ABW", callingCodes: Array(1), …}

However, when I try to add that to my data by adding this.countrydata = data ( I have added countrydata: [] in my data list

getCountriesList() {
                axios.get('https://restcountries.eu/rest/v2/all')
                .then(function(axiosTestResult) {
                    let data = axiosTestResult.data;
                    this.countrydata = data;
                })
            },

I get the error Cannot set property 'countrydata' of undefined. Am I not parsing the data correctly?

Thanks!

12 Apr
1 month ago

chrisgrim left a reply on Vue.components() Vs Vue.use() And Why I Can't Get Calendar To Work.

Ok So I think I figured it out. I was trying to load the date picker directly into my blade file with . Instead I had to create a new component which I called date-picker. I reference that in my blade file and inside that component I have the <AirbnbStyleDatepicker and all the info.

chrisgrim left a reply on Vue.components() Vs Vue.use() And Why I Can't Get Calendar To Work.

Hi @stereoh

I did import it like you have it there. I tried adding the Vue.use() with the window.AirbnbStyleDatepicker ( on their install they don't have window) and I am now getting the error.

Uncaught TypeError: Cannot read property 'install' of undefined

I can't figure out how to test where that is coming from.

chrisgrim left a reply on Is It Possible To Submit An Axios Post With An Image(formData) And Variables(data) In Vue

Ok I figured it out! in my onLoad method I assigned the file to a data item I created called file

onLoad(avatar) {
                this.avatar = avatar.src;
                this.file = avatar.file;
        },

This way when I submit the form later on I can just assign this.file to the append. Thanks you guys!

chrisgrim left a reply on Is It Possible To Submit An Axios Post With An Image(formData) And Variables(data) In Vue

Hi Guys!

Thank you so much for all of your help so far. I have got it working with this code

onLoad(avatar) {
                this.avatar = avatar.src;
                this.create(avatar.file);
        },
        create(avatar) {
            let data = new FormData();
            //this is image I want to add to data
            data.append('avatar', avatar)
            data.append('organizationName',this.search)
            data.append('organizationDescription',this.description)

            axios.post('/create-your-event/' + this.event.slug + '/organizer', data,
            {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
            }
                ).catch(error => {
                module.status = error.response.data.status;
            });
        },

The issue is if the user doesn't add the description before adding the image (which calls the method onLoad()) then I get an error because I require the image. I see now that the reason I was getting the error is because of this line

 this.create(avatar.file);

I guess before I was not passing the file through to the create() method. I tried

onLoad(avatar) {
                this.avatar = avatar.src;
        },
        create() {
    
            let data = new FormData();
            //this is image I want to add to data
            data.append('avatar', this.avatar.file)
            data.append('organizationName',this.search)
            data.append('organizationDescription',this.description)

            axios.post('/create-your-event/' + this.event.slug + '/organizer', data,
            {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
            }
                ).catch(error => {
                module.status = error.response.data.status;
            });
        },

where I removed it from the onload() and added it todata.append('avatar', this.avatar.file). But this doesnt work. Is there a way I can just call the create() method and get the same result?

chrisgrim left a reply on Is It Possible To Submit An Axios Post With An Image(formData) And Variables(data) In Vue

hi @bobbybouwmann

I actually have no trouble uploading the file if all I send is a single file. I can setup

methods: {
            onLoad(avatar) {
                this.avatar = avatar.src;
                this.persist(avatar.file);
            },

            persist(avatar) {
                let data = new FormData();

                data.append('avatar', avatar)
                axios.post(`/user`, data)
                    .then(() => flash('Avatar uploaded!'));
            }
        }

and it works. The issue I am having is I need to create the model for the organization at the same time. If I just upload the image I have nowhere to store the image path because no organization exists. So I need to send my data and the image in the same axios post.

chrisgrim started a new conversation Is It Possible To Submit An Axios Post With An Image(formData) And Variables(data) In Vue

Hi, I have a vue Component

<template>
<div>
  <div>
        <br>
        <h4>Production Company Name</h4>
  </div>
    <div class="autocomplete">
        <input type="text"
        v-model="search"
        @input="onChange"
        @keydown.down="onArrowDown"
        @keydown.up="onArrowUp"
        @keydown.enter.prevent="onEnter" 
        />
            <div 
            v-show="isOpen"
            class="autocomplete-results">
                <div 
                v-for="(result, i) in results"
                :key="i"
                @click="setResult(result)"
                class="autocomplete-result"
                :class="{ 'is-active': i === arrowCounter }"
                >
                    {{ result.organizationName }}
                </div>
            </div>
            <div class="profile-image" :style="{ backgroundImage: 'url(' + organizerImage + ')' }">
                
            </div>
           
            <div id="New Organizer" v-if="isNew">
                <div>
                        <label class="imgclick" :style="{ backgroundImage: 'url(' + avatar + ')' }">
                            <image-upload name="avatar" @loaded="onLoad"></image-upload>
                        </label>
                </div>
                <div>
                    <input type="text" v-model="description" placeholder="Description of Production Company">
                </div>
                <div>
                    <input type="text" v-model="organizerWebsite" placeholder="Enter Production Website">
                </div>
                <div>
                    <input type="text" v-model="twitter" placeholder="enter twitter handle">
                </div>
                <div>
                    <input type="text" v-model="facebook" placeholder="enter facebook handle">
                </div>
                <div>
                    <input type="text" v-model="instagram" placeholder="enter instagram handle">
                </div>
                
      
            </div>

            <div id="Exisiting Organizer" v-if="exists">
                <div >
                    <div>
                        <br>
                        <h4>Organization Description</h4>
                    </div>
                    <div>
                        {{ description }}
                    </div>
                    <div>
                        facebook:
                        {{ facebook }}
                    </div>
                    <div>
                        instgram:
                        {{ instagram }}
                    </div>
                    <div>
                        twitter:
                        {{ twitter }}
                    </div>
                    <div>
                        Website:
                        <br>
                        {{ organizerWebsite }}
                    </div>
                </div>
            </div>
        </div>
        <div class="">
            <button type="submit" class="create" @click.prevent="create"> Save and Continue </button>
        </div>
    </div>
    
  
</template>

<script>
    import ImageUpload from './imageupload.vue';
    export default {

    components: { 
        ImageUpload 
    },
    
    props: {
        items: {
            type: Array,
        },
        event: {
            type: Object,
        }
    },
    
    data() {
        return {
            search: '',
            description: '',
            twitter: '',
            facebook: '',
            instagram: '',
            results: [],
            isOpen:false,
            isNew:false,
            exists:false,
            arrowCounter: -1,
            result:'',
            organizationId: this.event.organizer_id,
            organizerImage:'',
            organizerWebsite:'',
            avatar: '',
        };
    },

    computed: {
        existingOrganization() {
            return this.items[this.event.organizer_id - 1];
        }

    },
    

    methods: {
        onLoad(avatar) {
                this.avatar = avatar.src;
        },
        create() {
            var data = {
                'organizationName': this.search,
                'organizationDescription': this.description,
                'facebookHandle': this.facebook,
                'instagramHandle': this.instagram,
                'twitterHandle': this.twitter,
                'organizationWebsite': this.organizerWebsite,
            };
            //this is image I want to add to data
            formData.append('avatar', this.avatar);

            axios.post('/create-your-event/' + this.event.slug + '/organizer', data).catch(error => {
                module.status = error.response.data.status;
            });
        },

        onArrowDown() {
          if (this.arrowCounter < this.results.length) {
            this.arrowCounter = this.arrowCounter + 1;
          }
        },
        onArrowUp() {
          if (this.arrowCounter > 0) {
            this.arrowCounter = this.arrowCounter - 1;
          }
        },
        onEnter() {
            this.result = this.results[this.arrowCounter];
            this.search = this.result.organizationName;
            this.organizationId = this.result.id;
            this.description = this.result.organizationDescription;
            this.isOpen = false;
            this.exists = true;
            this.isNew = false;
            this.arrowCounter = -1;
            this.facebook = this.result.facebookHandle;
            this.instagram = this.result.instagramHandle;
            this.twitter = this.result.twitterHandle;
            this.organizerWebsite = this.result.organizationWebsite;
            this.organizerImage = '/storage/' + this.result.organizationImagePath;
        },
        setResult(result) {
            this.search = result.organizationName;
            this.description = result.organizationDescription;
            this.organizationId = result.id;
            this.isOpen = false;
            this.exists = true;
            this.isNew = false;
            this.result = result;
            this.facebook = result.facebookHandle;
            this.instagram = result.instagramHandle;
            this.twitter = result.twitterHandle;
            this.organizerWebsite = result.organizationWebsite;
            this.organizerImage = '/storage/' + result.organizationImagePath;
        },
        onChange() {
            this.isOpen = true;
            this.filterResults();
            this.exists = false;
            this.isNew = true;
            this.description = '';
            this.organizationId = '';
            this.facebook = '';
            this.instagram = '';
            this.twitter = '';
            this.organizerImage = '';
            this.organizerWebsite = '';

        },
        filterResults() {
            this.results = this.items.filter(item => item.organizationName.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
        },
        init() {
            if( this.organizationId !== null ) {   
                this.search = this.event.organizer.organizationName;
                this.description = this.event.organizer.organizationDescription;
                this.facebook = this.event.organizer.facebookHandle;
                this.instagram = this.event.organizer.instagramHandle;
                this.twitter = this.event.organizer.twitterHandle;
                this.organizerImage = '/storage/' + this.event.organizer.organizationImagePath;
                this.organizerWebsite = this.event.organizer.organizationWebsite;
                this.exists = true;
                this.avatar = this.event.organizer.organizationImagePath;
            } 
        }
    },
    mounted() {
        this.init()
    },
};
</script>

Everything was working great until I tried to add an image upload to my axios post in the create() method. I click and upload the image and in chrome vue dev tool I can see under avatar it has

avatar:"data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAlAAD/4QMzaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIe Goes on forever

I tried to originally submit using

var data = {
                'organizationName': this.search,
                'organizationDescription': this.description,
                'facebookHandle': this.facebook,
                'instagramHandle': this.instagram,
                'twitterHandle': this.twitter,
                'organizationWebsite': this.organizerWebsite,
        'avatar': this.avatar
            };
axios.post('/create-your-event/' + this.event.slug + '/organizer', data).catch(error => {
                module.status = error.response.data.status;
            });

but it was giving me the error null on store() method. I read that I needed to use formData but when I tried to append() like I have it now I am still getting an error.

Is it possible to send both formData (image) and data (variables) through my axios post? If so, what would the code look like? Thanks!

My controller looks like this

public function storeOrganizer(Request $request, Event $event, Organizer $organizer)
    {
        $organizer = organizer::firstOrNew(request()->validate([
            'organizationName' => 'required',
            'organizationDescription' => 'required',
            'instagramHandle' => '',
            'twitterHandle' => '',
            'facebookHandle' => '',
            'organizationWebsite' => '',
        ]) + ['slug'=> str_slug(request('organizationName'))]);

        $path = $request->file('avatar')->store('organizers', 'public');
  
        $organizer->fill(['user_id'=> auth()->id()]);

        $organizer->save();

        $event->update(['organizer_id' => $organizer->id]);
    }
11 Apr
1 month ago

chrisgrim left a reply on Vue.components() Vs Vue.use() And Why I Can't Get Calendar To Work.

@wilburpowery so why would I be getting the error AirBnbStyleDatepicker is not defined?

chrisgrim left a reply on How To Submit Image And Text In One Axios POST?

I did that try that but it didn't seem like formData sent any of the non-image data.