0

私は現在、Spark 基盤上に構築された最初のアプリに取り組んでおり、壁にぶつかっています。Vue Laracast 全体を 2 回確認したことは言及しておく必要がありますが、Spark では Vue の使用方法が異なるため、混乱しています。うまくいけば、誰かが私のためにこれを少し明確にすることができます.

したがって、これまでに追加した最初のカスタムビューは次のとおりです。

@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);
        }
    }
};

当面の問題:このページを参照してコンソールを見ると、次のように表示されます。

式 "addServer.name" を評価する際のエラー: TypError: 未定義のプロパティ "name" を読み取ることができません

VM インスタンスに存在しないパス「addServer.name」を設定しています。信頼性の高い反応性とパフォーマンスの向上のために、「data」オプションを使用して poprety を事前に初期化することを検討してください。

v-on:submit="methodAddServer" は関数値を期待し、未定義になりました

私が試したこと：

（テストとして）ミックスインを使用せずにすべてのコードをコンポーネントに追加しようとしましたが、同じ問題が発生しました。

ビュー (Vue のビュー) が現在 Spark でどのように構築されているかを調べるのに時間を費やしましたが、構造の中でかなり迷子になってしまいます。

Vue laracast を見ているときに私が理解したことすべてから、これは機能するはずですが、Spark は何らかの他の規則を使用しているため、ここで想定されているかどうかはわかりません。Laracast で示されているように使用できることはわかっていますが、Spark で使用されているのと同じコーディング スタイルを使用してビルドを続けたいと考えています。

専門家の中に、何が起こっているのか、何が欠けているのかについての手がかりがある場合、またはその点について他に具体的なアドバイスがあれば、私は非常に感謝しています!

4

1 に答える 1

0

これに対する解決策は、Spark JS ファイルをエクスポートし、そこでどのように定義されているかを確認することでした。フォームはコンポーネント内で定義され、完全に見逃していたブートストラップ ファイルに含まれています。

于 2016-07-04T00:55:22.400 に答える