Новый вид в Spark, используя Vue

Я работаю над своим первым приложением, построенным на основе Spark foundation, и я попал в стену. Я должен упомянуть, что я уже дважды просматривал всю 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

В resourcesassetsjscomponents у меня есть файл с именем servers.js, который содержит:

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

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

И, наконец, resourcesassetsjsmasterserversservers.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.имя»: TypError: не может
прочитать свойство» name » undefined

Вы задаете несуществующий путь » addServer.имя » на экземпляре виртуальной машины.
Рассмотрите возможность предварительной инициализации poprety с опцией «data» для получения дополнительной информации
надежная реактивность и лучшее представление.

v-on: submit= «methodAddServer» ожидает значение функции, полученное неопределенным

Что я пробовал:

Я пытался добавить весь код в компонент без использования mixin, а также (как тест) — но это привело к тем же проблемам.

Я потратил некоторое время, просматривая, как виды (как Vue) построены в Spark сейчас, но в итоге потерялись в структуре совсем немного.

Из всего, что я понял, когда смотрел Vue laracast, это должно работать, но поскольку Spark использует какую — то другую конвенцию, я не уверен, что это должно здесь. Я понимаю, что могу использовать его, как показано в Laracast, но я хотел бы продолжать строить, используя тот же стиль кодирования, который используется в Spark.

Если у кого-то из вас, экспертов, есть какие-то подсказки о том, что может происходить или отсутствовать, или, если на то пошло, есть какие-то другие ощутимые советы, я был бы очень благодарен!

1 ответ

  1. Решением этой проблемы стал экспорт файлов Spark JS и анализ их определения. Формы определяются в компонентах и включаются в загрузочный файл, который я полностью пропустил.