Buefy 不工作

Question

我想在登录页面中放置一个简单的 buefy 复选框，但它没有显示（它只显示文本 "Remember me"）。我想将 buefy 与 Laravel 一起使用，当然还有 bulma .我已经尝试更改版本，但它不起作用。登录页面：

@extends('layouts.app')

@section('content')

<div id="app">

<div class="columns m-t-75">
    <div class="column is-one-third is-offset-one-third">
        <div class="card">
            <div class="card-header-title">
                <h1 class="title" style="font-weight: 100">Log in</h1>
            </div>

            <div class="card-content">
                <div class="field">
                    <label for="email" class="label">Email Adress</label>
                    <div class="control">
                        <input type="email" class="input" name="email" id="email">
                    </div>
                </div>
                <div class="field">
                    <label for="email" class="label">Password</label>
                    <div class="control">
                        <input type="password" class="input" name="password" id="password">
                    </div>
                </div>

                <b-checkbox name="remember">Remember me</b-checkbox>

                <button class="button is-success is-outlined is-fullwidth">Log in</button>
            </div>
        </div>
    </div>
</div>

</div>

@endsection

页脚

    <!-- Scripts -->
    <script src="{{ asset('/js/app.js') }}"></script>
    </body>
    </html>

app.js

require('./bootstrap');

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

Vue.use(Buefy);

package.json

"devDependencies": {
    "axios": "^0.16.2",
    "buefy": "^0.5.3",
    "bulma": "^0.5.3",
    "cross-env": "^5.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
},
"dependencies": {
    "font-awesome": "^4.7.0"
}

Answer 1

您必须像

之后那样绑定您的 #app div

require('./bootstrap')
window.Vue = require('vue')
import Buefy from 'buefy'
Vue.use(Buefy)

//Must have to bind this to work with VUE js
const app = new Vue({
 el: '#app'
});

你必须知道 Buefy 使用 Vue js。而在 Vue 中它必须需要包装整个文档。

You have to create a new vue instance with wrapping the div #app.

Answer 2

将 vue 组件添加到 app.js 文件。例如：

require('./bootstrap');

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

Vue.use('Buefy');

Vue.component(Buefy.Checkbox.name, Buefy.Checkbox);
var app = new Vue({
  el: '#app',
  data: {
  }
});

Buefy 不工作

Buefy not working

laravel

vue.js

vue-component

bulma