finchy70
1 month ago
240
7
Vue

Attaching belongsToMany records after submitting with Axios from Vue component

Posted 1 month ago by finchy70

I have converted a html form to a vue component to allow for some reactivity.

When I submit the form to the controller from the vue component I can't get it to associate rams with tasks. When using a standard form the code below worked fine.

    {
        $data = request()->validate([
            'job_no' => 'required|numeric|max:9999|min:1000',
            'site'   => 'required',
            'description' => 'required',
            'client_id' => 'required',
            'user_id' => 'required',
            'prelim_id' => 'required'
        ]);
        $rams = Rams::create($data);
        $rams->tasks()->attach($request->tasks);
        return view('rams.index');
    }

When i submit the data from my component with the following code

submitForm() {
                console.log(this.date);
                axios.post('/rams', {
                    prelim_id: this.prelim.id,
                    user_id: this.user.id,
                    client_id: this.client_id,
                    job_no: this.job_no,
                    site: this.site,
                    description: this.description,
                    tasks: this.selected_tasks
                })
                    .then((response) => {
                        return window.location.href = '/rams';
                    })
                    .catch(error => {
                        if(error.response.status === 422) {
                            this.errors = error.response.data.errors

                        }
                    });
            }

it gives the following error in the response. "message": "SQLSTATE[42S22]: Column not found: 1054 Unknown column 'generic' in 'field list' (SQL: insert into `rams_task` (`created_at`, `generic`, `id`, `name`, `rams_id`, `task_id`, `updated_at`) values (2019-12-06 09:30:49, 1, 2, Fuga omnis vel tenetur perspiciatis fugit., 13, 0, 2019-12-06 09:30:49), (2019-12-06 09:30:49, 1, 4, Eos maxime voluptatem vel accusamus., 13, 1, 2019-12-06 09:30:49))"

the data submitted is from this multiselect in the vue component.

<div class="row mr-1 ml-1">
       <label class="typo__label"><h5>Select Tasks</h5></label>
       <multiselect v-model="selected_tasks" :options="tasks" :multiple="true" :close-on-select="false"  :clear-on-select="false" :preserve-search="true" placeholder="Select tasks" label="name" track-by="name" :preselect-first="false">
                <template slot="selection" slot-scope="{ values, search, isOpen }">
                        <span class="multiselect__single" v-if="values.length &amp;&amp; !isOpen">
                                {{ values.length }} {{ values.length > 1 ? ' tasks ' : ' task '}} selected
                        </span>
                </template>
       </multiselect>
</div>
                    

I think that the data type submitted by the html selectbox and the multiselect in vue must be of different types. How can I get this to work???

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