GhazaliTajuddin.com

Another Kuantan Blogger

vuejs

Laravel + VueJS: Calling POST API with Object Input

by Leave a Comment

In this example, to insert data to our table, we use axios to make POST request to our API with json object data. Example structure of our object as illustrates

API Test with Insomnia

The data object is passed from our front end form to our store.js. In our store.js, inside our actions

let { data } = await Axios.post('http://localhost:8888/test/public/api/learners', {
                body: learnerdetail
            });

When the object received by the controller, it will pass to the appropriate method which in this case is store method().

public function store(Request $request)
    {
        $learner = new Learner();
        $learner->name = $request->input('body.name');
        $learner->learner_id = $request->input('body.learner_id');
        $learner->section = $request->input('body.section');
        $learner->save();

        //return $learner;
    }

 

 

Laravel + VueJS: Cant call routers within Store.js

by Leave a Comment

As mention in Vue Router documentation, we can simply use this.$router.push(‘router-name’) to get to the other component.

For some reason, i have some issues to use it in my store.js.

One of the solution i found here, where i need to exports all declaration inside app.js to other instance, then import it in my store.js.

app.js

const app = new Vue({
    el: '#app',
    router,
    store
});

export {app}

store.js

// import the app instance
import {app} from './app'
.
.
.
//calling example
app.$router.push('route-name');

Reference:

 

Laravel + VueJS: Handling Exception In Vuex

by Leave a Comment

Example 1

a) Controller 

When using get() method, you can provide constraint that will return collection in array. 

If no object. This will return empty array []

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->get();

        return response()->json($group, 200);
}

b) Thus, in Store.js (Vuex). We can do like this.

actions : {
        
        checkGroupName : async (context, name) => {

                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                if(data.length === 0){
                
                    context.commit('setGroup',{id:0,name:""}); //set to data to null
                    context.commit('setGroupAvailable',false); //set group availability to false

                }else{

                    context.commit('setGroup',data[0]);
                    context.commit('setGroupAvailable',true);

                }
}
}

Example 2

a) Controller

If you are using first() or firstOfFail() it will retrieve the first results of the query. If not, it will throw an exception (Illuminate\Database\Eloquent\ModelNotFoundException)

public function search($search)
    {
        
        $group = Group::query($search)
        ->where('name', '=', $search) 
        ->first();

        return $group;

    }

b) Store.js

By using try .. catch you can captured any exception occurs during API request.

actions : {
        
        checkGroupName : async (context, name) => {
                
                try{
                
                let { data } = await Axios.get('http://localhost:8888/test/public/api/groups/search/'+name);

                console.log(data)
                
                context.commit('setGroup',data);
                context.commit('setGroupAvailable',true);

            } catch (err){
                
                context.commit('setGroup',{id:0,name:""}); //set to data to null
                context.commit('setGroupAvailable',false); //set group availability to false

            }
}
}