laravel 5.8 and Vue "TypeError: Cannot read property 'open' of undefined"

Question

在我的 laravel 项目中，我使用了一个名为 LaraToaster 的包 LaraToaster

我按照包裹的要求去做

LaraToaster.vue

<template>
  <div></div>
</template>
<script>
  export default {
    props: ['message','type'],
    mounted() {
      this.$toast.open({
        message: this.message,
        type: this.type,
        duration: 2000,
        queue: true,
      })
    }
  }
</script>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import Buefy from 'buefy'

Vue.use(Buefy)

Vue.component('laratoaster', require('./components/LaraToaster.vue').default);

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

ContactController.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Toaster;
use App\Mail\ContactMail;

class ContactController extends Controller
{
  public function create()
  {
    return view('contact.create');
  }

  public function store()
  {
      $data = request()->validate([
        'name'    => 'required',
        'email'   => 'required|email',
        'message' => 'required|min:3',
      ]);
      Mail::to('test@test.com')->send(new ContactMail($data));
      Toaster::success("Your Message has been sent.");
      return redirect('contact');
  }
}

app.blade.php

<!DOCTYPE html>
<html class="overflow-auto" lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    // head content
</head>

<body>
    <div id="app">
        <main class="py-4">
            <div class="container">
                @yield('content')

            </div>
        </main>
    </div>
</body>

</html>

create.blade.php

@extends('layouts.app')
@section('content')

@section('head', 'Contact Us')
<div class="columns">
    <div class="column is-three-fifths is-offset-one-fifth">
         {!! Toaster::toast() !!}
    </div>
</div>

@endsection

组件已注册，但出现错误

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'open' of undefined"

found in

---> at resources/js/components/LaraToaster.vue

Answer 1

Buefy 最近更改了它的 API 以将所有内容都放在 $buefy 命名空间中。参见：

https://github.com/buefy/buefy/commit/5ba5094ed846608ae32bbadba5e79c01c4650f70

从 0.8.0 开始你需要使用：

this.$buefy.toast.open

我没有使用过 LaraToaster，但从快速浏览代码来看，这似乎足以修复它。如果您仍然有兼容性问题，您可能想使用以前版本的 Buefy，直到 LaraToaster 更新。

laravel 5.8 and Vue "TypeError: Cannot read property 'open' of undefined"

laravel 5.8 and Vue "TypeError: Cannot read property 'open' of undefined"

vue.js

laravel-5.8