laravel 5.8 和 Vue “TypeError：无法读取未定义的属性‘打开’”答案

【问题标题】：laravel 5.8 and Vue "TypeError: Cannot read property 'open' of undefined"laravel 5.8 和 Vue “TypeError：无法读取未定义的属性‘打开’”
【发布时间】：2019-08-04 09:01:30
【问题描述】：

在我的 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 警告]：挂载钩子错误：“TypeError：无法读取属性 'open' of undefined"

发现于

---> 在资源/js/components/LaraToaster.vue

【问题讨论】：

标签： vue.js laravel-5.8

【解决方案1】：

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

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

从0.8.0开始你需要使用：

this.$buefy.toast.open

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

【讨论】：