vue.js не удаляет строку

Я занимаюсь динамической формой, используя Vue.js, и на данный момент у меня все правильно, кроме функции remove. Это все правильно настроено, насколько я вижу, но консоль в моем браузере отображает ошибку «this.rows. $ Remove не является функцией».vue.js не удаляет строку

Кто-нибудь знает решение для этого или может помочь мне найти решение? Заранее спасибо.

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

Вот HTML для страницы, на которой отображается форма:

<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>

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

Вот HTML/лезвие для самой формы, которая входит:

{!! 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']) !!}

источник

2016-10-19 Justin Boxem

Похоже, что метод $remove устарел в версии 2.0, поэтому я предполагаю, что вы используете это. Вам нужно будет использовать сращивания вместо:

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

Вы можете увидеть скрипку здесь: https://jsfiddle.net/rLes3nww/

источник

2016-10-19 09:00:43

Это было. Большое спасибо @craig_h! –

Кроме того, можно ли уведомить vue.js об их устаревшем руководстве? Потому что я получил $ remove из руководства своего сайта. (Версия 2.0) –

Его действительно раздражает, обратитесь к руководству а затем выяснить, что он устарел.

Как бы то ни было, я нашел это как ссылку, устаревшей или нет. Reference to deprecated Vue stuff

источник

2016-11-12 15:29:16

vue.js не удаляет строку

ответ

Смежные вопросы