如何在 laravel 刀片模板上使用 buefy(vue.js 组件库)答案

【问题标题】：How to use buefy(vue.js component library) on laravel blade template如何在 laravel 刀片模板上使用 buefy(vue.js 组件库)
【发布时间】：2020-01-11 20:45:36
【问题描述】：

我正在尝试在我的项目中使用 buefy，但我无法在 laravel 5.8 上使用 vue.js，请帮助。

我的 app.js 上有这个

require('./bootstrap');

window.Vue = require('vue');
import Buefy from 'buefy';

Vue.use(Buefy);

这是我的刀片模板

@section('content')
  @foreach ($permissions as $permission)
    <div class="field">
      <b-checkbox v-model="permissionSelected" native-value="{{$permission->id}}">
        {{$permission->display_name}} <em>{{$permission->description}}</em>
      </b-checkbox>
    </div>
  @endforeach
@endsection

@section('scripts')
 <script>  
   var app = new Vue({
     el: '#app',
     permissionSelected: ['create-users']
   });
 </script>
@endsection

buefy 的复选框不起作用。

【问题讨论】：

标签： javascript php vue.js laravel-5

【解决方案1】：

使用 laravel 最好使用 vue 文件并使用 NPM 编译。

这是刀片文件。 Laravel-mix 将导入编译 /public/js/app.js:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
...
 <body>
    <div id="app">
        <app></app>
    </div>
<script src="{{ mix('js/app.js') }}"></script>

  </body>
</html>

您的 resources/js/app.js 将使用 App.vue 组件：

App.vue 可以是：

<template>
 <div>
   <h1>Hello</h1>
   <template v-for='permission in permissions' :key='item.id'>
    <div class="field">
      <b-checkbox v-model="permissionSelected" native-value="{{permission->id}}">
        {{permission->display_name}} <em>{{permission->description}}</em>
      </b-checkbox>
    </div>
  </template>
</div>
</template>
<script>
export default {
   name:'app',
   data:()=>({
     permissions:[],
     permissionSelected:null,
....

在终端中使用此命令编译您的 app.js、App.vue：npm run dev

【讨论】：