chrisgrim
6 months ago
49
10
Vue

Vue order of computing a method Issue

Posted 6 months ago by chrisgrim

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!

Please sign in or create an account to participate in this conversation.