Home » vue » Why this validation gives me always required?

Why this validation gives me always required?

Posted by: admin November 26, 2021 Leave a comment

Questions:

probably I’m doing something wrong, I have been coding by instinct haha. Laravel validation seems super easy to implement but for some reason between my vuejs component to my php function I’m always getting "required".
I’m new with both Laravel and Vuejs, it seems to me that my php function is fine (for what I can see on the web) but probably I’m missing something on the comunication between laravel and vue. Can you tell me whats wrong?

public function createTag(Request $request)
    {
        try {
            $data = request()->validate([
                'title' => 'required'
            ]);

            $tag = new Tag;
            $tag->title = $request->title;
            if($tag->save())
            {
                $tag->usercontracts()->attach($request->usercontractId);
            }

            return response()->success(__('success.showing', ['resource' => 'des Vertrags', 'resourceE' => 'tag']), $tag->id, 200);
        } catch (Exception $e) {
            return response()->error(__('error.showing', ['resource' => 'des Vertrags', 'resourceE' => 'tag']), 400, $e);
        }
    }
<template>
  <div id="relative">
    <button @click.prevent="show = 1" v-if="show == 0">+tag</button>
    <input type="text" v-model="title" name="title" v-if="show == 1">
    <button @click="createTag" v-if="show == 1">add</button>
  </div>
</template>
<script>
import TagService from "@/services/TagService";
export default {
  name: "add-tag-component",
  props: ['usercontractId'],
  data(){
    return {
      title:null,
      show:0
    };
  },
  methods:
  {
    async createTag()
    {
      const {body: {data}} = await TagService.createTag(this.title, this.usercontractId);
      this.$emit('addedTag', this.title, data);
      this.title = '';
      this.show = 0;
    }
  }
};
</script>

And this is TagService

export default {
    createTag(title, usercontractId, tagId) {
        return Vue.http.post(`contract/createTag/${title}/${usercontractId}`, tagId);
    }
}

I’m also getting this error. May be here is the answer?

Vue warn]: Error in v-on handler (Promise/async): "[object Object]"

found in

—> at resources/assets/js/components/contract/listing/AddTagComponent.vue
at resources/assets/js/components/contract/listing/ContractListingItemComponent.vue
at resources/assets/js/components/contract/listing/ContractListingComponent.vue

Answers:

In your TagService

You need to pass the ${title} as payload not as uri.

export default {
    createTag(title, usercontractId, tagId) {
        return Vue.http.post(`contract/createTag/${title}/${usercontractId}`, tagId);
    }
}

to

export default {
    createTag(title, usercontractId, tagId) {
        return Vue.http.post(`contract/createTag`, {
            tagId: tagId,
            title: title,
            usercontractId: usercontractId
        });
    }
}

Laravel validates the payload you pass.