Felipe's questions

I have a small api made in Laravel, it is working without problems and all the tests in Postman are successful, the problem is when I try to show the data by the Vue view, it just doesn't show me anything, not even errors

This is the view code

<template>
    <div id="home" class="container">
        <div class="row justify-content-center">
           <div class="col-md-8">
               <div class="card card-default" v-for="product in products" 
                  :key="product.id">
                    <div class="card-header">{{product.name}}</div>
                    <div class="card-body">
                         {{product.totalPrice}}
                    </div>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
   export default {
      data() {
          return {
              products: [],
          }
      },
      created(){
          this.allProducts();
      },
      methods: {
        allProducts(){
            let self = this;
            let urlAllProducts = '/api/products';
            axios.get(urlAllProducts)
                .then(response => {
                    self.products = response.data;
                })
                .catch(err => {

                })
          }
      },
   }
 </script>

ProductController

public function index()
{
    return ProductCollection::collection(Product::all());
}

Api.php file

Route::apiResource('/products', 'ProductController');
Route::group(['prefix' => 'products'], function(){
    Route::apiResource('/{product}/reviews','ReviewController');
});

The view looks like this

I'm a couple of hours already messed with this problem.

Any ideas? I use Laravel 5.6, Vuejs 2

Inside the template of the Event.vue component I have a select that reads from the wallet table, it is a normal select to choose only one type of wallet (it is not multiselect), for that select I use the vue-multiselect component to make a simple select, the code is the following

<template>
  <div class="form-group row">
    <label for="" class="col-2 col-form-label">Bitellera</label>
    <div class="col-3">
        <multiselect name="wallet" v-model="walletvalue" 
                                 track-by="id" 
                                 label="name" 
                                 placeholder="Selecciona" 
                                 :options="wallets" 
                                 :searchable="false"
                                 :allow-empty="false">
        </multiselect>
     </div>
</template>
 <script>
    export default {  
      components: { 
          Multiselect,
          Datepicker,
      },
      props: ['auth'],     
      data () {
          return {
              wallets:        [],
              walletvalue:    [],
          }
      },
      created() {
        this.getWallet();
      },
      methods: {
         getWallet(){
            let urlWallet = '/dashboard/wallets';
            axios.get(urlWallet)
                .then((response) => {
                    this.wallets = response.data;
                })
                .catch((err) => {

                })
         },
         createdEvent(){
            let urlEvent = '/dashboard/addevent';
            let idwallet = this.walletvalue.map(e=> e.id);
            const eventData = {
                'wallet'        : idwallet,
            }
                axios.post(urlEvent, eventData)
                .then((response) => {
                    console.log(ok);
                })
                .catch((err) => {

                })
        }
  }
 </script>

As Vue brings the complete object, I only need to show the id of the selected wallet, for that I use the js map function, the problem is that it throws me the following error when making the view work

Uncaught TypeError: this.walletvalue.map is not a function
at VueComponent.createdEvent (app.js:79132)
at submit (app.js:79192)
at invoker (app.js:22317)
at HTMLFormElement.fn._withTask.fn._withTask (app.js:22116)

How can i fix this? I use Laravel 5.6 and Vuejs 2

I'm trying to save the data that I send from the Event.vue view to the EventController controller's storeEvent method but it gives me a 422 error and I can't find the problem so far.

The Event model has a many-to-many relationship with the Categories model, and also Event has a many-to-many relationship with the Coins model, it is for this reason that I use vue-multiselect since the user can select several categories or several coins for the same event

event.vue

<template>
   <form v-on:submit.prevent="createdEvent" class="form-horizontal">
     <div class="form-group row">
       <label>Titulo</label>
       <input type="text" name="title" maxlength="25" v-model="title">
     </div>
     <div class="form-group row">
       <label>*Cryptodivisas</label>
       <multiselect v-model="coinvalue" :options="coins"
                    :multiple="true" label="name" 
                    track-by="id" placeholder="Seleccione">
       </multiselect>
     </div>
     <div class="form-group row">
       <label>*Categoría</label>
       <multiselect v-model="categoryvalue" :options="categories"
                    :multiple="true" label="name" 
                    track-by="id" placeholder="Seleccione">
       </multiselect>
     </div> 
     <div class="col-sm-12">
       <button class="btn" type="submit">Crear evento</button>
     </div>
   </form>
 </template>
 <script>
    import Multiselect from 'vue-multiselect';
    export default {  
      components: { 
        Multiselect,
      },
      props: ['auth'],     
      data () {
        return {
            user:           {},
            title:          '',
            coins:          [],
            coinvalue:      [],
            categories:     [],
            categoryvalue:  [], 
       }
      },
      created() {
        this.getCoins();
        this.getCategories();
      },
      mounted() {
        this.user = JSON.parse(this.auth);
      },
      methods: {
        getCoins(){
            let urlCoin = '/dashboard/coins';
            axios.get(urlCoin)
                .then((response) => {
                    this.coins = response.data;
                })
                .catch((err) => {

                })
        },
        getCategories(){
            let urlCategories = '/dashboard/categories';
            axios.get(urlCategories)
                .then((response) => {
                    this.categories = response.data;
                })
                .catch((err) => {

                })
        },
        createdEvent(){
            let urlEvent = '/dashboard/newEvent';
            const eventData = {
                'id'            : this.user.id,
                'title'         : this.title,
                'coin'          : this.coinvalue,
                'category'      : this.categoryvalue,
            }
            console.log(eventData);
            axios.post(urlEvent, eventData)
                .then((response) => {
                    console.log(ok);
                })
                .catch((err) => {
                    console.log(err.response.data);
                })
        }
 </script>

storeEvent (EventController)

   public function storeEvent(Request $request)
   {
      $this->validate($request, [
                    'title'    => 'required|max:25',
                    'coin'     => 'required',
                    'category' => 'required',
            ]);

            $userAuth = Auth::user()->id;
            $userEvent = $request->id;
            if($userAuth === $userEvent){
                $event = new Event;
                $event->user_id = $userEvent;
                $event->title = $request->title;   
                if($event->save()){
                    $event->coins()->attach($request->coin);
                    $event->categories()->attach($request->category);
                    return response()->json([
                            'status' => 'Muy bien!',
                            'msg' => 'Tu evento ya fue creado con éxito.',
                            ], 200);
                }
                else {
                    return response()->json([
                                'status' => 'Error!',
                                'msg' => 'No pudimos crear tu evento.',
                            ], 401);
                }
           }
    }

I think the problem may be when I assign the values ​​to the coin()->attach() and category()->attach() sections, but I have no idea how to fix it due to my inexperience with the tool.

The system was made entirely in Laravel and it worked without problems, now that it is being updated with Vue it started to give problems.

Any ideas? I use Laravel 5.6, Vuejs 2, Axios and Vue-multiselect 2

I need to implement a multiselectin the view I'm working on, the idea is to have several options selected in the same select. I have tried some components that I found on the web but without good results.

Controller route and method in Laravel works fine.

I have to feed the Multiselect from a method that brings the data, If you can help me it would be great, I leave you the code

event.vue

<template>
   <div>
     <div class="col-sm-12">
       <select class="form-control form-control-line"> 
           <option v-for="coin in coins" :key="coin.id" value="coin.id">
               {{ coin.name }}
           </option>
       </select>
   </div>
</template>
<script>
    export default {
    data () {
       coins: [],
     },
    created() {
        this.getCoins();
    },
    methods: {
        getCoins(){
            let urlCoin = '/dashboard/coins';
            axios.get(urlCoin)
                .then((response) => {
                    this.coins = response.data;
                })
                .catch((err) => {

                })
        }
    }
</script>

The idea is to achieve this

I use Laravel 5.6andVueJS 2

I have to change the user's profile image, I am using Vuejs for this purpose, the problem is that it passes the image to me base64and when I do decode in the method of myProfilethe controller it is simple or it saves the number 1 in the avatar field of the table useror just pass it null.

profile.vue

<template>
   <input type="file" name="image" @change="getImage" accept="image/*">
   <img :src="avatar" class="img-circle" width="150" />
   <a href="" v-show="loaded" class="btn btn-success" @click.prevent="updateAvatar">Upload</a>

</template>
<script>
   props: ['auth'],
data() {
    return {
        user: {},
        errorss: {},
        showMe: false,
        loaded: false,
        avatar: '',
    }
},
mounted() {
    this.user = JSON.parse(this.auth);
    this.avatar = this.user.avatar;
},
   getImage(e){
        let image = e.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(image);
        reader.onload = e => {
            this.avatar = e.target.result;
        }
        this.loaded = true;
    }, 
    updateAvatar(){
        let urlAvatar = '/dashboard/avatar';
        //let value = new FormData();
        //value.append('image', this.avatar);
        const value = {
                'image': this.avatar
            }

        axios.put(urlAvatar, value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((e) => {
                console.log(e.response.data);
            })
    },
</script>

Note: When I occupy an FormData()avatar it happens to me empty

myProfileI have already made so many changes to the method that in the end I leave it like this to see how they can guide me.

myProfile (UserController)

public function myAvatar(Request $request)
{
    $file_data = $request->image;
    $avatar = Storage::putFile('public/defaults/users/avatar/', base64_decode($file_data));

    $userAvatarUpdate = User::find(Auth::user()->id);
    $userAvatarUpdate->avatar = $avatar;
    $userAvatarUpdate->update();

    return response()->json([
            'status' => 'Muy bien!',
            'msg' => 'Tu foto de perfil se actualizo.',
        ], 200);

}

I have seen several tutorials but I have not yet reached the solution that fits what I need.

Any ideas? I am using Laravel 5.6, Vuejs 2and Axios.

How can I capture the result of the form validation from the controller and display it in the vue view?

I have the Store method in the CategoryController controller that is responsible for validating and entering the data to the db, I need to pass the result of the validation to the view, which is if characters, numbers or blank spaces were entered, so that this way you can then pass the data to the table using Axios.

Any ideas? I'm using Laravel 5.6 and Vuejs 2

I have a method that captures the information sent by the vue view (Profile.vue) through a PUT generated by Axios, the problem lies in the following, when the data is updated (through the myProfile method of the UserController controller), axios captures the information of the json return from the method, and the success message is displayed, but when there is an error, Axios does not capture the error json information and tells me the following:

Uncaught (in promise) TypeError: Cannot read property 'status' of undefined

I understand that you are claiming me for the variables that I have in the Axios catch that do not have information

The code for myProfile is as follows:

    $profile = User::find(Auth::user()->id);
    $profile->firstname = $request->firstname;
    $profile->lastname = $request->lastname;
    $profile->gender = $request->gender;
    $profile->description = $request->description;
    if($profile->update())
    {
        return response()->json([
                'status' => 'Muy bien!',
                'msg' => 'Datos actualizados correctamente.',
                'cod' => 201
        ]);
    }
    else{
            return response()->json([
                'status' => 'Ocurrio un error!',
                'msg' => 'Ocurrio un error al actualizar la información.',
                'cod' => 400
                ]);
    }

Axios section of Profile.vue

axios.put('/dashboard/profile', value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationError(title,body);
            })

As I mentioned before, when there is success in the controller, Axios reads and displays the json message, when there is an error, it does not.

Where am I failing that Axios cannot display the json error message coming from the controller?

I use Laravel 5.6, Vuejs 2 and Axios

I have to make the update user profile view in Vuejs, the view is currently made in blade and it works fine, but I have to pass everything to Vuejs.

From the sidebar.blade.php I pass the user to the Vue component called Profile.vue

 <profile-component :auth="{{ Auth::user() }}"></profile-component>

The data is collected in the template of the Profile.vue component and is displayed in the text boxes of the form with v-model .

<template>
   <div class="row">
     <form  class="form-horizontal form-material">
       <div class="form-group">
         <label class="col-md-12">Nombre</label>
           <div class="col-md-12">
             <input type="text" class="form-control form-control-line"
               v-model="auth.name">
             </div>
           </div>
           <div class="form-group">
             <label class="col-md-12">Apellido</label>
               <div class="col-md-12">
                 <input type="text" class="form-control form-control-line"
                   v-model="auth.lastname">
               </div>
            </div>
            <div class="form-group">
              <label class="col-sm-12">Genero</label>
              <div class="col-sm-12">
                <select class="form-control form-control-line">
                  <option>Femenino</option>
                  <option>Masculino</option>
                  <option>Otra orientación</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="col-md-12">Sobre mi</label>
              <div class="col-md-12">
                <textarea rows="5" class="form-control form-control-line"
                 v-model="auth.description">
                </textarea>
              </div>
            </div>
          <div class="col-sm-12">
            <button class="btn btn-success" 
              v-on:click="editUser()">Actualizar
            </button>
          </div>
      </form>
    </div>
</template>
<script>
 export default {
 props: ['auth'],
 data() {
    return {
        user: {
            firstName: '',
            lastName: '',
            gender: '',
            descriptionUser: ''
        },
    }
},
methods: {
    editUser(){

    }
},
filters: {
    moment: function(date) {
        return moment(date).format("D [de] MMMM [de] YYYY ");
    }
}

}

These are the paths of the we.php file

Route::get('/panel/profile', 'UserController@userEdit');
Route::put('/panel/profile', 'UserController@userUpdate');

How can I do it having the Vuejs view?

I need to create editUser() method

The topic confuses me since I've only been with Vue for a short time, I'm using Laravel 5.6, Vuejs 2 and Axios.

From already thank you very much

How can I add the word "of" in the date using momentjs?

Example:4 de Mayo de XXXX

The day, month and year are the same, the important thing is to add the word "of" in the date.

How can I customize 404, 400 and other errors in Laravel 5.6?

I have my error pages ready in the errors folder inside view

I'm loading a template for the administrator area and it turns out that the style.css matrix css in its code has import from other css that I also have, the problem is that those css are not loaded and I don't understand how to include them within Laravel Mix, Next I show you how I have organized the assets.

Assets folder

Style.css has the following (which is where I get the problem even though I fixed the paths by removing scss etc)

@import url(../icons/font-awesome/css/font-awesome.min.css);
@import url(../scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(../scss/icons/weather-icons/css/weather-icons.min.css);
@import url(../scss/icons/linea-icons/linea.css);
@import url(../scss/icons/themify-icons/themify-icons.css);
@import url(../scss/icons/flag-icon-css/flag-icon.min.css);
@import url(../scss/icons/material-design-iconic- 
 font/css/materialdesignicons.min.css);
@import url("https://fonts.googleapis.com/css? 
 family=Poppins:300,400,500,600,700");
@import url(css/spinners.css);
@import url(css/animate.css);

Webpack.mix.js

mix.styles([
'resources/assets/template/back/css/style.css',
'resources/assets/template/back/css/colors/blue.css',
'resources/assets/template/back/css/icons/font-awesome/css/font-awesome.css',
'resources/assets/template/back/css/spinners.css', 
'resources/assets/template/back/css/style.css'
], 'public/css/all.css')
.scripts([
'resources/assets/template/back/js/jquery.slimscroll',
'resources/assets/template/back/js/waves.js',
'resources/assets/template/back/js/sidebarmenu.js',
'resources/assets/template/back/js/sticky-kit-master/dist/sticky-kit.min.js',
'resources/assets/template/back/js/sparkline/jquery.sparkline.min.js',
'resources/assets/template/back/js/dashboard2.js',
'resources/assets/template/back/js/custom.js',
'resources/assets/template/back/js/styleswitcher/jQuery.style.switcher.js'
], 'public/js/all.js')
 .js(['resources/assets/js/app.js'],'public/js/app.js');

And this is the error it gives me when loading the backend template

How can I solve this? I know it's basic but it's my first project in Laravel (I use version 5.6)

I need to save the data in a table if it doesn't exist yet or update it if it does exist. I have this code so far that only creates them in the table, the table is called Coin.php

    $client = new Client([
        'base_uri' => 'https://api.coinmarketcap.com/v1/',
        'timeout'  => 2.0,
    ]);
    $response = $client->request('GET', 'ticker');

    $coins = json_decode($response->getBody()->getContents());

    foreach ($coins as $res) {
        $datos = new Coin;
        $datos->name = $res->name;
        $datos->symbol = $res->symbol;
        $datos->rank = $res->rank;
        $datos->save();
    }

This method is a command that is executed every 5 minutes and has to check if they exist or not in the table to be able to do the operations that I mentioned above.

I'm running Laravel 5.6 Any ideas?

my problem is that I cannot show the value of the user's gender that already has a value assigned, I want to show this in the select combo of the profile view, the select combo only shows me the default values ​​but not the value already assigned to Username.

The Gender table has the values ​​1: Female, 2: Male, 3: Other

The user is assigned the value 2 (male), and the word "male" is what I want to show in the select menu as already selected when editing profile

this is the view

The default option of the select should be Male, which is what the user has been assigned.

Thank you!

I need to create the block user section in an app that I am making, for that I did the following.

1.- Add a new boolean field to the USER table

$table->boolean('isBlocked')->default(0);

2.- Then in the LoginController controller

protected function credentials(Request $request)
{
    $credentials = $request->only($this->username(),'password');
    return array_add($credentials, 'isBlocked', 0); 
}

The problem is that both the user has a value of 0 or 1 in the isBlocked field, the system does not let me enter.

I'm working with Laravel's default auth, the question I have is that to edit the profile, is it necessary to pass the user's $id in the edit form? this $id is captured by the EDIT method of the UserController controller and then by the UPDATE method, can we just use auth() from the form to the controller? Is there any way to make the urls cleaner?

I am new to laravel and I have to make a small application which will then have an api of

I attach a screenshot of the user profile, form and controller routes

Routes

Controller Edit method

Controller Update method

Form

Thanks for the help!

I have the following problem, I get a question mark "?" instead of "/" in my link of the option "security (security)" of the menu sidebar or url

urls

Side bar menu

Routes

Controller

router list

How can I solve that?

Thank you!