New view in Spark, using Vue

Question

I'm working on my first app built on the Spark foundation now, and I've hit a wall. I should mention that I've looked through the entire Vue Laracast twice now - but Vue is used differently in Spark, which has me confused. Hopefully someone can clarify this a bit for me.

So, the first custom view I've added so far is:

@extends('spark::layouts.app')

@section('content')
<master-servers>
    <div class="container">
        <!-- Add Server -->
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Add Server</div>

                    <div class="panel-body">
                        <form class="form-horizontal" role="form" method="POST" v-on:submit.prevent='methodAddServer'>
                            {{ csrf_field() }}

                            @if(count($errors) > 0)
                                <div class="alert alert-danger">
                                    @foreach($errors->all() as $error)
                                        <p>{{ $error }}</p>
                                    @endforeach
                                </div>
                            @endif

                            @if(session('fail'))
                                <div class="alert alert-danger">
                                    <p>{{ session('fail') }}</p>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    <p>{{ session('success') }}</p>
                                </div>
                            @endif
                            <!-- Server Label -->
                            <div class="form-group">
                                <label class="col-md-4 control-label">Server Label</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="name" v-model='addServer.name' value="{{ old('name') }}" autofocus>
                                </div>
                            </div>

                            <!-- IP -->
                            <div class="form-group">
                                <label class="col-md-4 control-label">IP Address</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="ip" v-model='addServer.ip' value="{{ old('ip') }}">
                                </div>
                            </div>


                            <!-- Add Button -->
                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary" :disabled="addServerFormBusy">
                                        <i class="fa m-r-xs fa-sign-in"></i>Add server
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</master-servers>
@endsection

In the resources\assets\js\components, I then have a file named servers.js, which contains:

var base = require('../master/servers/servers');

Vue.component('master-servers', {
    mixins: [base]
})

And finally, resources\assets\js\master\servers\servers.js contains:

module.exports = {
    data: function() {
        return {
            addServer: [
                { name: '' },
                { ip: '' }
            ]
        }
    },

    methods: {
        methodAddServer: function(e) {
            console.log(addServer);
            this.addServerFormBusy = true;
            this.$http.post('server', this.addServer);
        }
    }
};

The issue at hand: When browsing this page, and watching the console, I get the following:

Error when evaluating expression "addServer.name": TypError: Cannot read property "name" of undefined

You are setting a non-existant path "addServer.name" on a vm instance. Consider pre-initializing the poprety with the "data" option for more reliable reactivity and better performance.

v-on:submit="methodAddServer" expects a function value, got undefined

What I've tried:

I've tried adding all of the code into the component without using a mixin as well (as a test) - but that resulted in the same issues.

I spent some time looking through how the views (as Vue's) are built in Spark now, but wind up getting lost in the structure quite a bit.

From everything I've understand when watching the Vue laracast, this should work - but as Spark is using some kind of other convention, I'm not sure it's supposed to here. I realize I could use it as shown in the Laracast, but I'd like to keep building using the same coding style that is used in Spark.

If any of you experts out there have any clue as to what might be going on or missing, or for that matter have any other tangible advise, I'd be very thankful!

Answer 1

The solution to this turned out to be exporting the Spark JS files and reviewing how it's defined there. Forms are defined within components and included in a bootstrap file, which I had completely missed.