Vuejs使用

在laravel-admin中可以很方便的使用vuejs，下面是一个使用vuejs实现的一个简单的number-input示例

先参考上一篇文档，在app/Admin/bootstrap.php中定义资源依赖：

\Encore\Admin\Assets::define('vuejs', [
    'js'     => ['https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',],
    'export' => 'Vue',
]);

开发视图文件/resources/views/admin/number-input.blade.php：

<section class="vue-number">
    <div class="input-group">
        <span class="input-group-prepend">
            <button type="button" class="btn btn-info" v-on:click="decrement" >-{{ step }}</button>
        </span>
        <input type="text" class="form-control text-center" :value="value">
        <span class="input-group-append">
            <button type="button" class="btn btn-info" v-on:click="increment">+{{ step }}</button>
        </span>
    </div>
</section>

<style>
    .vue-number {
        width: 250px;
    }
</style>


<script require="vuejs">
new Vue({
    el: ".vue-number",
    data: function() {
        return @json($options);
    },
    methods: {
        increment: function() {
            this.value = Math.min(this.value + this.step, this.max);
        },
        decrement: function() {
            this.value = Math.max(this.value - this.step, this.min);
        }
    }
});
</script>

在控制器中使用：

<?php

use Encore\Admin\Layout\Content;

class VuejsController extends Controller
{
    public function index(Content $content)
    {
        $options = ['value' => 50, 'max' => 100, 'min' => 5, 'step' => 2];

        return $content
            ->title('Vue number')
            ->description('介绍..')
            ->view('admin.number-input', compact('options'));
    }
}

显示效果如下：