我正在开发我的第一个基于Spark基础的应用程序,而且我已经碰壁了 . 我应该提一下,我现在已经两次查看整个Vue Laracast了 - 但是在Spark中使用的是不同的Vue,让我很困惑 . 希望有人可以为我澄清这一点 .
所以,到目前为止,我添加的第一个自定义是 view :
@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 ,然后我有一个名为servers.js的文件,其中包含:
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: 浏览此页面并观看控制台时,我得到以下信息:
评估表达式“addServer.name”时出错:TypError:无法读取未定义的属性“name”您正在vm实例上设置不存在的路径“addServer.name” . 考虑使用“数据”选项预先初始化poprety,以获得更可靠的反应性和更好的性能 . v-on:submit =“methodAddServer”需要一个函数值,未定义
What I've tried:
我已经尝试将所有代码添加到组件中而不使用mixin(作为测试) - 但这导致了相同的问题 .
我花了一些时间来研究现在如何在Spark中构建视图(如Vue),但最终会在结构中迷失方向 .
从观察Vue laracast时我所理解的一切来看,这应该有效 - 但是由于Spark正在使用某种其他惯例,我不确定它应该在这里 . 我意识到我可以使用它,如Laracast中所示,但我想继续使用Spark中使用的相同编码风格进行构建 .
如果你们中的任何一位专家对于可能发生或遗失的事情有任何线索,或者就此事有其他任何有形的建议,我将非常感激!
1 回答
解决方案的结果是导出Spark JS文件并查看它在那里的定义 . 表单在组件中定义并包含在bootstrap文件中,我完全错过了 .