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警告]：挂接的钩子中出现错误：“ TypeError：无法读取属性   未定义的“打开””

位于

--->在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和Vue“ TypeError：无法读取未定义的属性'open'

1 个答案: