javascript - 如何在 laravel 刀片模板上使用 buefy(vue.js 组件库)
问题描述
我正在尝试在我的项目中使用 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 的复选框不起作用。
解决方案
使用 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
推荐阅读
- java - Apache Http 客户端 - 在 100,000 个请求之后,我开始收到所有请求的状态代码 400 bad request
- python - 过滤数据集的线性回归
- python - 将列表拆分为 3 部分字典 Python3
- c++ - STL 位集移位运算符导致分段错误
- c# - InvalidOperationException: Can't use schemaId .. 相同的 schemaId 已用于类型
- asp.net-mvc - 带有 AspNetCore.Authentication.OpenIdConnect 隐式流的片段 URL
- java - 在 libgdx 中部署到 web 时替换 isInstance() 方法
- netlogo - NetLogo:如何在乌龟出生后立即更换特定的标志?
- sql - 如何在我的 SQL 函数中使用 MAX ( COUNT (*))?
- c - 如何像在 python 中那样在 C 中乘以字符串?