Neue Ansicht in Spark, mit Vue

Question

Ich arbeite an meiner ersten App, die jetzt auf der Spark Foundation gebaut wurde, und ich habe eine Wand getroffen. Ich sollte erwähnen, dass ich jetzt zweimal durch den gesamten Vue Laracast geschaut habe - aber Vue wird im Spark anders verwendet, was mich verwirrt hat. Hoffentlich kann jemand das ein bisschen für mich klären.

Also, die erste benutzerdefinierte Ansicht ich bisher aufgenommen habe, ist:

@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 den Ressourcen \ assets \ js \ components, dann habe ich eine Datei namens servers.js, die enthält:

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

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

Und schließlich resources \ assets \ js Master \ Server \ \ servers.js enthält:

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

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

Die Frage auf der Hand: Wenn Sie diese Seite durchsuchen, und die Konsole beobachten, erhalte ich folgendes:

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

Was ich versucht habe:

Ich habe versucht, das Hinzufügen des gesamten Codes in die Komponente ohne Verwendung eines Mixins (als Test) - aber das führte zu denselben Problemen.

Ich habe einige Zeit damit verbracht, durchzusehen, wie die Ansichten (wie Vues) jetzt in Spark gebaut werden, aber letztendlich in der Struktur verloren gehen.

Von allem, was ich verstanden habe, wenn ich den Vue Laracast beobachte, sollte das funktionieren - aber da Spark eine Art Konvention verwendet, bin ich mir nicht sicher, ob es hier sein soll. Ich weiß, dass ich es wie im Laracast gezeigt verwenden könnte, aber ich würde gerne mit dem gleichen Code-Stil weitermachen, der in Spark verwendet wird.

Wenn einer von euch Experten da draußen irgendeinen Hinweis darauf hat, was passieren könnte oder fehlt, oder in diesem Fall irgendeinen anderen greifbaren Ratschlag, wäre ich sehr dankbar!

Answer 1

Die Lösung für dieses Problem bestand darin, die Spark JS-Dateien zu exportieren und zu überprüfen, wie sie dort definiert sind. Formulare sind in Komponenten definiert und in einer Bootstrap-Datei enthalten, die ich komplett verpasst habe.