Question

我正在开发我的第一个基于Spark基础的应用程序，而且我已经碰壁了。我应该提一下，我现在已经翻过了整个Vue Laracast两次 - 但是Vue在Spark中使用的方式不同，让我很困惑。希望有人可以为我澄清一点。

所以，到目前为止我添加的第一个自定义视图是：

@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

在resources \ assets \ js \ components 中，我有一个名为servers.js的文件，其中包含：

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

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

最后，resources \ assets \ js \ master \ servers \ servers.js包含：

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

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

手头的问题：浏览此页面并观看控制台时，我会收到以下信息：

评估表达式时出错＆＃34; addServer.name＆＃34;：TypError：不能   读取财产＆＃34;名称＆＃34;未定义的

您正在设置一条不存在的路径＆＃34; addServer.name＆＃34;在vm实例上。   考虑使用＆＃34;数据预先初始化poprety＆＃34;选项更多   可靠的反应性和更好的性能。

V-上：提交=＆＃34; methodAddServer＆＃34;期望一个函数值，未定义

我尝试过的事情：

我尝试将所有代码添加到组件中而不使用mixin（作为测试） - 但这导致了同样的问题。

我花了一些时间来研究现在如何在Spark中构建视图（如Vue＆＃39; s），但最终会在结构中迷失方向。

从观看Vue laracast时我所理解的一切来看，这应该有用 - 但是由于Spark正在使用某种其他惯例，我不确定它应该在这里。我意识到我可以像Laracast中所示那样使用它，但是我想继续使用Spark中使用的相同编码风格进行构建。

如果你们中的任何一位专家对于可能发生或遗失的事情有任何线索，或者对此事有任何其他有形的建议，我将非常感激！

Answer 1

解决方案的结果是导出Spark JS文件并查看它在那里的定义。表单在组件中定义并包含在bootstrap文件中，我完全错过了。

Spark中的新视图，使用Vue

1 个答案: