vue.js entfernt Zeile

nicht

Ich bin damit beschäftigt, ein dynamisches Formular mit Vue.js zu erstellen, und im Moment scheint mir alles korrekt zu sein, außer der remove-Funktion. Es ist alles richtig konfiguriert, soweit ich sehe, aber die Konsole in meinem Browser zeigt den Fehler "this.rows. $ Remove ist keine Funktion".vue.js entfernt Zeile

Kennt jemand die Lösung dafür, oder kann mir helfen, die Lösung zu finden? Danke im Voraus.

======================================

ist die HTML für die Seite, wo das Formular angezeigt wird:

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>M06 Property-create</title> 

    <!-- Including nessecary javascript sources --> 
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 

</head> 


{!! Form::open(array('route' => 'property.store')) !!} 

@include('properties.form') 

{!! Form::close() !!} 

<a href="/property">Return</a> 

<script> //This script handles the adding/removal of label/text fields upon clicking the add label/remove label button 
    var app = new Vue({ 
     el: "#app", 
     data: { 
      rows: [ 
       {name: ""} 
      ] 
     }, 
     methods: { 
      addRow: function() { 
       this.rows.push({name: ""}); 
      }, 
      removeRow: function (row) { 
       console.log(row); 
       this.rows.$remove(row); 
      } 
     } 
    }); 
</script> 

</body> 
</html>

================================ ======

Hier ist das HTML/Blatt für das Formular selbst, die enthalten ist:

{!! Form::label('label', Lang::get('misc.label')) !!} 
{!! Form::text('label', null, ['class' => 'form-control', 'required']) !!} 
<br> 
{!! Form::label('internal_name', Lang::get('misc.internal_name')) !!} 
{!! Form::text('internal_name', null, ['class' => 'form-control', 'required']) !!} 
<br> 
{!! Form::label('field_type_id', Lang::get('misc.fieldtype_name')) !!} 
{!! Form::select('field_type_id', $fieldTypes) !!} 

<div class="dropdown box"> 
<div class="multi-field-wrapper"> 

    <div class="multi-fields"> 
     <div class="multi-field"> 

      <div id="app"> 
       <table class="table"> 
        <thead> 
        <button type="button" class="button btn-primary" @click="addRow">Add label</button> 

        <tr> 
         <td><strong>Label</strong></td> 
         <td></td> 
        </tr> 
        </thead> 
        <tbody> 
         <tr v-for="row in rows"> 
          <td><input type="text" v-model="row.name"></td> 
          <td><button type="button" class="button btn-primary" @click="removeRow(row)">Remove</button></td> 
         </tr> 
        </tbody> 
       </table> 
      </div>  

     </div> 
    </div> 
</div> 
</div> 
<br> 
{!! Form::label('property_group_id', Lang::get('misc.group_name')) !!} 
{!! Form::select('property_group_id', $groups) !!} 
<br>   
{!! Form::label('description', Lang::get('misc.description')) !!} 
{!! Form::textarea('description', null, ['class' => 'form-control', 'required']) !!} 
<br> 
<br> 
{!! Form::submit(Lang::get('misc.save'), ['class' => 'btn btn-success', 'id' => 'btn-save']) !!}

Quelle

2016-10-19 Justin Boxem

Es sieht so aus, als ob die $remove Methode in Vue 2.0 veraltet ist, also nehme ich an, dass Sie das verwenden. Sie müssen Spleiß verwenden, anstatt:

HTML:

<tr v-for="(row, index) in rows"> 
    <td><input type="text" v-model="row.name"></td> 
    <td><button type="button" class="button btn-primary" @click="removeRow(index)">Remove</button></td> 
</tr>

Javascript:

removeRow: function (index) { 
    console.log(index); 
    this.rows.splice(index,1); 
}

Sie die Geige hier sehen können: https://jsfiddle.net/rLes3nww/

Quelle

2016-10-19 09:00:43

Das hat es getan. Vielen Dank @craig_h! –

Ist es auch möglich, vue.js über seinen veralteten Leitfaden zu informieren? Weil ich die $ remove von ihrem Site-Guide bekommen habe. (2.0 Version) –

Es ist wirklich an der Führung zu verweisen irritierend und dann herauszufinden, dass es veraltet ist.

Wie auch immer ich fand dies als Referenz, von denen man veraltet ist oder nicht. Reference to deprecated Vue stuff

Quelle

2016-11-12 15:29:16

vue.js entfernt Zeile

Antwort

Verwandte Themen