HubertVanD

Tried it. Does not solve the problem. It has to do with the map-object. If I replace it with a rectangle, the dropdown menu is rendered in front of teh rectangle.

I have a Laravel 8 + Tailwind+Vue app with a menubar with dropdown submenus. In the body of the page I have a number of Vue components that render a title and then a google map. The dropdown menus are rendered over teh title (as I would expect) but under the google map. I have tried different combinations of z-index but none solves the problem. I am using gmap-vue to render the google maps in Vue.

Help would be appreciated.

My menu bar:

<nav class="container z-0 flex flex-col items-center justify-between px-4 py-6 mx-auto text-white bg-gray-800 lg:flex-row">
    <div class="flex flex-col items-center mt-6 lg:mt-0 lg:flex-row -bottom-0">

        <!-- Logo -->
        <a href="/">
            <img src="{{ asset('images/banner.png') }}" alt="de ijsmannetjes" class="flex-none w-32">
        </a>

        <!-- left menu -->
        <ul class="flex ml-0 space-x-8 lg:ml-16">

            <form method="GET" action="/gebieden" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Routes</button>
            </form>

            <form method="GET" action="/gebied/create" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Nieuwe route</button>
            </form>

            <form method="GET" action="/location" class="hover:text-gray-400">
                @csrf
                <button type="submit" class="hover:underline">Toon locatie kar</button>
            </form>


            <div class="relative inline-block dropdown">
                <button class="inline-flex inline-block ">
                    <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                    </svg>
                    <span class="mr-1">Op pad</span>
                </button>
                <ul class="absolute hidden pt-1 text-gray-700 dropdown-menu">
                    @foreach(App\Models\Area::all() as $area)
                    <li class=""><a class="block px-4 py-2 whitespace-no-wrap bg-gray-200 rounded-t hover:bg-gray-400"
                            href="/gebied/show/{{$area->id}}">{{ $area->name }}</a></li>
                    @endforeach
                </ul>
            </div>

And the html part of the Vue component:

<template>
  <div class="">
    <div class="flex-container">
      <gmap-map
        :center="reportedMapCenter"
        :zoom="13"
        ref="map"
        :options="mapOptions"
        class="map-container"
      >
        <gmap-polygon
          v-if="paths.length > 0"
          :paths="paths"
          :editable="editable"
          @paths_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          :options="polygonOptions"
          ref="polygon"
        >
        </gmap-polygon>

        <!-- <gmap-cluster> -->
        <gmap-marker v-for="m in markers" :position="m.position" :key="m.id">
        </gmap-marker>
        <!-- </gmap-cluster> -->
      </gmap-map>
    </div>
    <div class="flex flex-row mt-4">
      <div class="pt-2" v-if="editbutton">
        <button
          v-if="editable"
          @click="savePath()"
          class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
        >
          Save path
        </button>
        <button
          v-if="!editable"
          @click="toggleEdit()"
          class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
        >
          Edit path
        </button>
      </div>
      <div class="ml-4 place-self-center">
        <p>Aantal aanmeldingen: {{ nClients }}</p>
      </div>
    </div>
  </div>
</template>

Thanx. Do you have a suggestion for a video?

I have a Laravel 8 project where I want to have 3 types of users: a. guests that do not have to register b. an admin with full rights c. an employee with restricted rights With Laravel Breeze a and b are easy, but how to do C?

As admin I want to to be able to add an employee with a default password. The employee can then afterwards log in and change his/her password. But the admin then has teh right to delete the use account.

How can I do this in the easiest way?

Kind regards,

Hubert

I just found it myself! Stupid mistake. Thanx anyhow.

In my application I have a vue component that shows a map. I am using this component in 2 different blade files. The strange thing is that in one case the map is showing, in the other it is not.

When I use the inspector, the Vue component is detected in both cases in the component data are identical.

The source of tha page on which the component is not showing:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Ijskar langs laten komen</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="http://ijskar.test/css/app.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>

    <style>
        body {
            font-family: 'Nunito';
        }
    </style>
    <script src="http://ijskar.test/js/app.js" defer></script>
</head>

<body >
    <div id="root" class="flex-wrap py-8 lg:w-auto lg:mx-96">


            
            <h1 class="text-3xl font-bold ">Waar bevindt onze ijskar zich nu</h1>
            <div>
                
                <view-cart ></view-cart>
            </div>





    </div>
</body>

</html>

The source of the page where the component does show:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>De IJsmannetjes</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">

    <link href="http://ijskar.test/css/app.css" rel="stylesheet">


    <style>
        body {
            font-family: 'Nunito';
        }
    </style>
    <style>
        .map-container {
            width: 400px;
            height: 400px;
        }

        .flex-test3-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .flex-test3-container>div {
            display: flex;
            flex-direction: row;
        }

        .flex-test3-container>div>small {
            margin-right: .3rem;
            font-size: 16px;
            font-weight: bolder;
        }

        .dropdown:hover .dropdown-menu {
            display: block;
        }
    </style>
    <script src="http://ijskar.test/js/app.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.4/lodash.js"></script>

</head>

<body>

    

    <div id="root" class="flex-wrap py-8 lg:w-auto lg:mx-96">

        <h1 class="text-3xl font-bold ">Waar bevindt onze ijskar zich nu</h1>
<div>
    <view-cart></view-cart>
</div>
    </div>



</body>

</html>

Any idea what I do wrong?

Kind regards,

Hubert

The second suggestion did it.

I have a Vue component. I define:

 data() {
    return {
      marker: {
        lat: 0,
        lng: 0,
      },

The I fetch new data through Axios and I want to update the marker-object:

 methods: {
    getLocation() {
      axios
        .get("/location/kar/" + this.area_id)
        .then(function(response) {
             console.log(response.data);
             this.marker=response.data;
             console.log(this.marker);
            })
        .catch(function (error) {
          console.log(error);
        });

But I get the error message:

app.js:4519 TypeError: Cannot set property 'marker' of undefined

Most likely I am making a stupid Javascript error. But what am I doing wrong?

Hubert

Unfortunately it cleaned my routes file and my app.js ;-)

I am now re-creating them.

I tried to install on an existing project.

I was installing Breeze on a Laravel 8 project. When running npm run dev I got the error:

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin autoprefixer requires PostCSS 8.

My package.json

    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^10.1.0",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss": "^8.2.1",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "^2.0.2",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}

Who can help me fix this error?

Hubert

This makes no difference.

The error message also says that the problem is that $message is unknown?

I am using notifications to send out emails. I want to use an image in the header of the email. I learned that I have to use $message->embed() to embed the image in the email. But I cannot get it to work. I get the error:

local.ERROR: Undefined variable: message (View: C:\xampp\htdocs\ijskar\resources\views\vendor\mail\html\header.blade.php) {"exception":"[object] (Facade\Ignition\Exceptions\ViewException(code: 0): Undefined variable: message (View: C:\xampp\htdocs\ijskar\
esources\views\vendor\mail\html\header.blade.php) at C:\xampp\htdocs\ijskar\
esources\views/vendor/mail/html/header.blade.php:6)

My header.blade.php:

<tr>
<td class="header">
<a href="{{ $url }}" style="display: inline-block;">

@if (trim($slot) === 'De IJsmannetjes')
    <img src="{{$message->embed('banner.png')}}" class="logo" alt="IJsmannetjes Logo">
@else
{{ $slot }}
@endif
</a>
</td>
</tr>

What am I doing wrong?

Kind regards,

Hubert

Thanx for the advice: it solved the problem.

The Laravel documentation although clearly sates:

Cache::put('key', 'value', $seconds = 10);

And tinker does have access to the cache.

Kind regards,

HUbert

It is the first time that I am using the cache in Laravel for an app. But I do not succeed in getting data out of teh cache.

My .env:

CACHE_DRIVER=file

The 2 methods in my controller:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Cache;

class LocationController extends Controller
{

    
    public function store(Request $request, $area_id, $location)
    {
        Cache::put('location', $location, $seconds = 36000);
        Cache::put('area', $area_id, $seconds = 36000);

        return [Cache::get('location')];
    }

    public function get(Request $request, $area_id)
    {

        $location = Cache::get('location');
        dd($location);

    }
}

When I use the store-method, the data seem to be stored in the cache: the return value is indeed the value to be stored in the cache. But when I use the get-method, dd($location) returns null. Also if I access the cache through php artisan tinker, I cannot find the data.

Any advice what I am doing wrong?

Kind reagrds,

Hubert

Clicked the wrong button. Sorry.

This was the cause of the error message! Thnx.

I must say that Vue eror messages are not always very helpfull.

I am building an application where I initially pass a collection of Areas to a vue component. Each Area contains a json encoded polygon with coordinates. The vue components renders the polygon on a (google) map. This works flawlessly. But then I want to add to each Area a number of Clients with their address information. If I do that, I get an error message from Vue:

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'leijgraaf","pivot":{"area_id":3,"client_id":7,"created_at":"2021-01-01t21:17:14.000000z","updated_at":"2021-01-01t21:17:14.000000z"}}]}' is not a valid attribute name.

I can't find anything on this error message that helps me. I tried al kinds of variations in the encoding of the collection, but nothing works. Hope someone can give some suggestions.

The collection of Areas that is passed:

  Illuminate\Database\Eloquent\Collection {#4351
     all: [
       App\Models\Area {#4307
         id: 2,
         name: "Hasselderheide",
         polygon: "[{"lat":51.42734401458352,"lng":6.170142758003911},{"lat":51.42338365925515,"lng":6.169198620430669},{"lat":51.4206807872797,"lng":6.1736618162314505},{"lat":51.422922041443705,"lng":6.176204550377569},{"lat":51.42553781401708,"lng":6.176515686623296}]",
         created_at: "2021-01-01 15:42:42",
         updated_at: "2021-01-01 15:42:42",
         clients: Illuminate\Database\Eloquent\Collection {#4335
           all: [
             App\Models\Client {#4358
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4354
                 area_id: 2,
                 client_id: 2,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
             App\Models\Client {#4359
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4357
                 area_id: 2,
                 client_id: 3,
                 created_at: "2021-01-01 21:06:18",
                 updated_at: "2021-01-01 21:06:18",
               },
             },
           ],
         },
       },
       App\Models\Area {#4300
         id: 3,
         name: "Velden",
         polygon: "[{"lat":51.43030379856803,"lng":6.1642523369595414},{"lat":51.404931819567686,"lng":6.151377733688057},{"lat":51.40418222166233,"lng":6.176182802657784},{"lat":51.4246311190432,"lng":6.1903448662564164}]",
         created_at: "2021-01-01 15:43:06",
         updated_at: "2021-01-01 21:17:14",
         clients: Illuminate\Database\Eloquent\Collection {#4344
           all: [
             App\Models\Client {#4360
               id: 2,
               name: "Jaspers",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4336
                 area_id: 3,
                 client_id: 2,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4361
               id: 3,
               name: "Jasperen",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4342
                 area_id: 3,
                 client_id: 3,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
             App\Models\Client {#4362
               id: 7,
               name: "De Leijgraaf",
               pivot: Illuminate\Database\Eloquent\Relations\Pivot {#4152
                 area_id: 3,
                 client_id: 7,
                 created_at: "2021-01-01 21:17:14",
                 updated_at: "2021-01-01 21:17:14",
               },
             },
           ],
         },
       },
     ],
   }

The method in the controller that generates the collection:

public function index()
    {
        
        $areas = Area::with('clients:id,name')->get();
        return view('admin.index', ['areas' => $areas]);
    }

The relevant code in the Blade view:

    @foreach($areas as $area)
    <div class="m-8 ">
        <h1 class="text-xl font-bold">{{ $area->name }}</h1>
        <edit-polygon area={{ $area->toJson() }}></edit-polygon>
    </div>
    @endforeach

If I don't use the "->toJson()", the error stays the same

Finally the edit-polygon component:

template>
  <div>
    <div class="flex-container">
      <gmap-map
        :center="reportedMapCenter"
        :zoom="13"
        ref="map"
        :options="mapOptions"
        class="map-container"
      >
        <gmap-polygon
          v-if="paths.length > 0"
          :paths="paths"
          :editable="editable"
          @paths_changed="updateEdited($event)"
          @rightclick="handleClickForDelete"
          :options="polygonOptions"
          ref="polygon"
        >
        </gmap-polygon>
<!--
        <gmap-cluster>
            <gmap-marker
                v-for="m in markers"
                :position="m.position"
                :key="index">
            </gmap-marker>
        </gmap-cluster> -->

      </gmap-map>
    </div>
    <div class="pt-2">
      <button
        v-if="editable"
        @click="savePath()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Save path
      </button>
      <button
        v-if="!editable"
        @click="toggleEdit()"
        class="px-4 py-2 font-semibold bg-transparent border rounded hover:bg-blue text-blue-dark hover:text-blue hover:border-blue"
      >
        Edit path
      </button>

    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// import * as VueGoogleMaps from "gmap-vue";

// Vue.use(VueGoogleMaps, {
//   load: {
//     key: "AIzaSyCSPDTifDu_qeYo8VfU0aGhGDnWXtf8f60",
//     libraries: "places", // This is required if you use the Autocomplete plugin
//   },

//   installComponents: true,
// });

function closeLoop(path) {
  return path.concat(path.slice(0, 1));
}

export default {
  props: ["area"],

  data() {
    return {
      reportedMapCenter: {
        lat: 51.33,
        lng: 6.14,
      },
      markers: [
        {
          position: {
            lat: 51.4236,
            lng: 6.1709,
          },
        },
        {
          position: {
            lat: 51.4336,
            lng: 6.1709,
          },
        }],
      edited: null,
      mvcPaths: null,
      editable: false,
      id: null,
      paths: [],
      polygonOptions: {
        strokeColor: "#FF00AA",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
      },
      mapOptions: {
        zoomControl: true,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true,
        disableDefaultUi: false,
        clickableIcons: false,
      },


    };
  },

  mounted() {
    this.paths = JSON.parse(JSON.parse(this.area).polygon);
    this.id = JSON.parse(this.area).id;
    // this.reportedMapcenter=this.polygonCenter();
    this.reportedMapCenter.lat = this.polygonCenter().lat;
    this.reportedMapCenter.lng = this.polygonCenter().lng;
  },

  watch: {
    polygonPaths: _.throttle(function (paths) {
      if (paths) {
        this.paths = paths.flat();
      }
    }, 1000),
  },

  computed: {
    polygonPaths: function () {
      if (!this.mvcPaths) return null;

      let paths = [];
      for (let i = 0; i < this.mvcPaths.getLength(); i++) {
        let path = [];
        for (let j = 0; j < this.mvcPaths.getAt(i).getLength(); j++) {
          let point = this.mvcPaths.getAt(i).getAt(j);
          path.push({ lat: point.lat(), lng: point.lng() });
        }
        paths.push(path);
      }

      return paths;
    },
  },

  methods: {
    mapCenter() {
      console.log(this.reportedMapCenter);
      return this.reportedMapcenter;
    },

    toggleEdit() {
      this.editable = true;
    },

    updateEdited: function (mvcPaths) {
      this.mvcPaths = mvcPaths;
    },

    addPath: function () {
      // obtain the bounds, so we can guess how big the polygon should be
      var bounds = this.$refs.map.$mapObject.getBounds();
      var northEast = bounds.getNorthEast();
      var southWest = bounds.getSouthWest();
      var center = bounds.getCenter();
      var degree = this.paths.length + 1;
      var f = Math.pow(0.66, degree);

      // Draw a triangle. Use f to control the size of the triangle.
      // i.e., every time we add a path, we reduce the size of the triangle
      var path = [
        {
          lng: center.lng(),
          lat: (1 - f) * center.lat() + f * northEast.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * southWest.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
        {
          lng: (1 - f) * center.lng() + f * northEast.lng(),
          lat: (1 - f) * center.lat() + f * southWest.lat(),
        },
      ];
      this.paths = path;
    },

    removePath: function () {
      this.paths = [];
      //   this.paths.splice(this.paths.length - 1, 1);
    },

    savePath() {
      axios
        .patch("/gebied/" + this.id, {
          id: this.id,
          polygon: JSON.stringify(this.paths),
        })
        .catch(function (error) {
          console.log(error);
        });
      this.editable = false;
    },

    handleClickForDelete($event) {
      if ($event.vertex) {
        this.$refs.polygon.$polygonObject
          .getPaths()
          .getAt($event.path)
          .removeAt($event.vertex);
      }
    },

    polygonCenter() {
      let top = 0;
      let bottom = 90;
      let left = 180;
      let right = 0;
      let center = {};

      for (let i = 0; i < this.paths.length; i++) {
        if (this.paths[i].lat > top) {
          top = this.paths[i].lat;
        }
        if (this.paths[i].lat < bottom) {
          bottom = this.paths[i].lat;
        }
        if (this.paths[i].lng > right) {
          right = this.paths[i].lng;
        }
        if (this.paths[i].lng < left) {
          left = this.paths[i].lng;
        }
      }

      center = {
        lat: (top + bottom) / 2,
        lng: (left + right) / 2,
      };

      return center;
    },
  },
};
</script>

Anyone suggestions? I do not have a lot of experience yet with passing clompex data to Vue.

Kind regards,

Hubert

I agree. I will read it, but for now the $table is a quick fix.

Although I thought I followed the documentation about many-to-many relationships, I now see that I didn't follow the naming conventions. I didn't read the piece about pivots. It looks complicated: I will study it at a later time.

Setting the $table proved to be a good fix though.

Thnx.

Hubert

I am building a project in Laravel 8.

I have a migration for a client_areas model that I use for a many-to-many relationship:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateClientAreasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('client_areas', function (Blueprint $table) {
            $table->unsignedBigInteger('clients_id')->constrained()->onDelete('cascade');
            $table->unsignedBigInteger('areas_id')->constrained()->onDelete('cascade');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('client_areas');
    }
}

My models: Client_Area.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Client_Area extends Model
{
    use HasFactory;

    protected $guarded = [];
}

Client.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

Area.php

<?php

namespace App\Models;

use App\Models\Area;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;

class Client extends Model
{
    use HasFactory;

    protected $guarded = [];


    public function areas()
    {
        return $this->belongsToMany(Area::class, 'client_areas', 'clients_id', 'areas_id');
    }
}

The problem I run into is that when I call App\Models\Client_Area::all(); I get the error message

Base table or view not found: 1146 Table 'db_ijskar.client__areas' doesn't exist

It took me hours to find out that in the error message there is a double underscore in the table name. But I triplechecked my code and I cannot find that double underscore anywhere. Also the actual table in my database is called client_areas with a single underscore.

Can anyone give me advice what to do next?

Hubert

Thanx for the reply again. Some answers:

• My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
• The logfile is empty
• vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

• I removed gmap-vue.
• I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
• reinstalled gmap-vue
• stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

Thanx for the reply again. Some answers:

• My Laraval installation is fresh 8.0. Only changed the database data in .env. And installed Breeze.
• The logfile is empty
• vue2-google-maps forked into gmap-vue. I first used gmap-vue. Because of the error I changed to gmap-vue, but the error persisted. Then changed back.

Meanwhile I fixed the problem, although I do not understand exactly how!

• I removed gmap-vue.
• I selectively commented out lines in app.js to see what lines caused the problem. Uncommented them again
• reinstalled gmap-vue
• stared using gmap-vue again instead of vue2-google-maps. Then the error was gone!

Thanx anyway.

Regards,

Hubert

I copied the code from another Laravel project where it worked flawlessly! So this is not the problem. Strangely enough that other project now also has the same problem.

One thing I changed is that I adapted Apache to use HTTPS. Could that be a problem?

I ported some vue2-google-maps based components to a fresh Laravel project. But for some reason I keep getting this error and everything I tried didn't help. Hopefully someone has an advice. Most likely it is a very basic erro that I fail to see.

my app.js:

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
load: {
    key: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    libraries: "places", // This is required if you use the Autocomplete plugin
},

installComponents: true,
});

Vue.component('edit-polygon', require('./components/EditPolygon.vue').default);
Vue.component('create-area', require('./components/CreateArea.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

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

My bladefile:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

       <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap" rel="stylesheet">



        <style>
            body {
               font-family: 'Nunito';
            }
        </style>
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="antialiased">
         <div id="test1">
            <example-component></example-component>
        </div>

    </body>
</html>

My package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "alpinejs": "^2.7.3",
        "autoprefixer": "^9.8.6",
        "axios": "^0.19",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "npm:@tailwindcss/[email protected]^2.0.1",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "gmap-vue": "^1.5.0",
        "vue": "^2.6.12",
        "vue2-google-maps": "^0.10.7"
    }
}

Thanx. I'll try it.

The worrying thing is of course that I have to do this anyhow. It already happened twice this week for the same Laravel project.

Any idea what I may be doing wrong?

Hubert

Solved in meanwhile:

• removes node_modules folder
• removed package-lock.json
• ran npm install

Did that

I'm building a Laravel 8 project using Vue2. The initial problem was that Chrome dev tools did recognize Vue, but does not show the root component.

When I ran npm run dev in the root of my project, I got an error message:

> @ development C:\xampp\htdocs\api-frontend
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

'cross-env' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_023Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hubert\AppData\Roaming\npm-cache\_logs20-12-11T19_14_02_042Z-debug.log

Most likely it is an obvious error I make, but I don't see it!

Any suggestions?

Hubert

Thanx. I could have thought about it myself!

Thnx.

My project crashes during rendering of Blade files, most likely due to the value of Blade variables. Is there an easy way to debug this? E.g. by dumping the value of the variables in a way equivalent to dd() or dump() in php?

HUbert

Many older games in IGDB don't have a complete record: all kinds of keys are missing. I could only fix this with a bunch of isset()'s in formatGameForView and show.blade.php.

Am I the only one with this problem?

Like a charm

Clear. I've managed to set up a virual host in Xampp.

I'm following the videogame aggregator training currently. U have 4 Livewire components on a page that each make an HTTP-request. This is supposed to happen asynchronously.

But when I put asleep(3) in the first component to make it slower, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

When I put the sleep(3) in the first component, all other 3 seem to wait for the first to finish. Apparently they are not working asynchronously.

Am I doing something wrong?

Hubert

Does that mean that I have to create the api-site myself locally?

I'm currently following the video series about VUE and SPA. In episode seven the use axios calls to a remote api: laracasts.test/api/stats.

I however get the error: net::ERR_NAME_NOT_RESOLVED

It looks like laracast.test doesn't exist?

Or am I doing something wrong?

HUbert

Meanwhile I found the error, and it was dumb: the path to tailwind.config.js was wrong!

Thanx anyway.

I am starting a new Laravel project with Vue and Vue-router and Tailwind (the Laravel, Vue, and SPA videos form Laracasts). However I keep getting the npm error written in the title of this discussion.

My webpack.mix.js:

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss')

mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .options({ processCssUrls: false, postCss: [tailwindcss('./path/to/your/tailwind.config.js')], });

My app.scss:

@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";

I tried a method described elsewhere in this form: removing node_modules and install npm again. But that didn't help.

Most likely I am making a stupid beginners error, but I can't find it.

Any suggestions?

Hubert

In Laravel 7 only the second method works for me. And you have to import App\Rules\SpamFree.

Found it: A type : Middelware instead of Middleware!!

Thanx.

Hubert

[2020-10-12 20:24:40] local.ERROR: Method App\Http\Controllers\UserNotificationsController::middelware does not exist. {"exception":"[object] (BadMethodCallException(code: 0): Method App\Http\Controllers\UserNotificationsController::middelware does not exist. at C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Controller.php:68) [stacktrace] #0 C:\xampp\htdocs\forum-oude pc\app\Http\Controllers\UserNotificationsController.php(12): Illuminate\Routing\Controller->__call('middelware', Array) #1 [internal function]: App\Http\Controllers\UserNotificationsController->__construct() #2 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(849): ReflectionClass->newInstanceArgs(Array) #3 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(691): Illuminate\Container\Container->build('App\\Http\\Contro...') #4 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(796): Illuminate\Container\Container->resolve('App\\Http\\Contro...', Array, true) #5 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Container\Container.php(637): Illuminate\Foundation\Application->resolve('App\\Http\\Contro...', Array) #6 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Application.php(781): Illuminate\Container\Container->make('App\\Http\\Contro...', Array) #7 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(253): Illuminate\Foundation\Application->make('App\\Http\\Contro...') #8 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(970): Illuminate\Routing\Route->getController() #9 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Route.php(931): Illuminate\Routing\Route->controllerMiddleware() #10 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(702): Illuminate\Routing\Route->gatherMiddleware() #11 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(678): Illuminate\Routing\Router->gatherRouteMiddleware(Object(Illuminate\Routing\Route)) #12 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(662): Illuminate\Routing\Router->runRouteWithinStack(Object(Illuminate\Routing\Route), Object(Illuminate\Http\Request)) #13 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(628): Illuminate\Routing\Router->runRoute(Object(Illuminate\Http\Request), Object(Illuminate\Routing\Route)) #14 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Routing\Router.php(617): Illuminate\Routing\Router->dispatchToRoute(Object(Illuminate\Http\Request)) #15 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(165): Illuminate\Routing\Router->dispatch(Object(Illuminate\Http\Request)) #16 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(128): Illuminate\Foundation\Http\Kernel->Illuminate\Foundation\Http\{closure}(Object(Illuminate\Http\Request)) #17 C:\xampp\htdocs\forum-oude pc\vendor\barryvdh\laravel-debugbar\src\Middleware\InjectDebugbar.php(58): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #18 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Barryvdh\Debugbar\Middleware\InjectDebugbar->handle(Object(Illuminate\Http\Request), Object(Closure)) #19 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #20 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #21 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\TransformsRequest.php(21): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #22 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\TransformsRequest->handle(Object(Illuminate\Http\Request), Object(Closure)) #23 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\ValidatePostSize.php(27): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #24 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\ValidatePostSize->handle(Object(Illuminate\Http\Request), Object(Closure)) #25 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode.php(63): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #26 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode->handle(Object(Illuminate\Http\Request), Object(Closure)) #27 C:\xampp\htdocs\forum-oude pc\vendor\fruitcake\laravel-cors\src\HandleCors.php(37): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #28 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fruitcake\Cors\HandleCors->handle(Object(Illuminate\Http\Request), Object(Closure)) #29 C:\xampp\htdocs\forum-oude pc\vendor\fideloper\proxy\src\TrustProxies.php(57): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #30 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(167): Fideloper\Proxy\TrustProxies->handle(Object(Illuminate\Http\Request), Object(Closure)) #31 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Pipeline\Pipeline.php(103): Illuminate\Pipeline\Pipeline->Illuminate\Pipeline\{closure}(Object(Illuminate\Http\Request)) #32 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(140): Illuminate\Pipeline\Pipeline->then(Object(Closure)) #33 C:\xampp\htdocs\forum-oude pc\vendor\laravel\framework\src\Illuminate\Foundation\Http\Kernel.php(109): Illuminate\Foundation\Http\Kernel->sendRequestThroughRouter(Object(Illuminate\Http\Request)) #34 C:\xampp\htdocs\forum-oude pc\public\index.php(55): Illuminate\Foundation\Http\Kernel->handle(Object(Illuminate\Http\Request)) #35 {main} "}

I'm following the Forum-videos. In video 44 I am running into a problem that I am unable to solve:

In a test I make a getJson request:

    $this->assertCount(
        1,
        $this->getJson("/profiles/" . auth()->user()->name . "/notifications")->json()
    );

In web.php I have the route:

Route::get('/profiles/{user}/notifications', '[email protected]');

phpunit gives green light, but the index method in the controller is never called. Also later, when I use an axios call from a Vue component to the same route, I get a 500 error.

Most likely it is a stupid error I am making somewhere.

Is there a way to show the request that is received by the backend and that is used to select the right route in web.php? At least I an then check whether the right URI is coming in.

Kind regards,

Hubert