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

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 

В ресурсах \ активы \ JS \ компоненты, я тогда есть файл с именем servers.js, который содержит:

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

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

И, наконец, ресурсы \ активы \ JS \ мастер \ сервера \ 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); 
     } 
    } 
}; 

этот вопрос под рукой: При просмотре этой страницы, и наблюдая за консоль, я получаю следующее:

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

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

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

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

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

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

Answer 1

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