我有一个错误：使用Vuejs / Laravel添加多行数据

Question

我阅读了有关发票系统的代码，以使用Vuejs添加多行。但是我无法在自己的代码中弄清楚它。

代码：https://codepen.io/jjelic/pen/yevNLZ?editors=1010

老实我不懂太多代码。我已经尽力了，但是有一些错误。

首先，这就是我的代码现在的样子。

刀片

<div class="col-md-12" v-sortable.tr="rinvoices">
  <div class="form-group col-md-4" v-for="rinvoice in rinvoices" track-by="$index">
    @{{ $index +1 }}
  <label for="">   Amount HT</label>
  <input data-validation="number"  data-validation-help="Be Careful with the amoutn please !" data-validation-error-msg="Only numbers are allowed !" class="form-control" placeholder="Amount" v-model="rinvoices.amount" name="newamount" id="newamount" ></input>
  <button class="btn btn-primary btn-xs" @click="addRow($index)">add row</button>
  <button class="btn btn-danger btn-xs" @click="removeRow($index)">remove row</button>
  </div>
</div> 

Vuejs

Vue.directive('sortable', {
twoWay: true,
deep: true,
bind: function () {
    var that = this;

    var options = {
        draggable: Object.keys(this.modifiers)[0]
    };

    this.sortable = Sortable.create(this.el, options);
    console.log('sortable bound!')

    this.sortable.option("onUpdate", function (e) {            
        that.value.splice(e.newIndex, 0, that.value.splice(e.oldIndex, 1)[0]);
    });

    this.onUpdate = function(value) {            
        that.value = value;
    }
},
update: function (value) {        
    this.onUpdate(value);
}});


 var app = new Vue({
el: '#app',

data: {
rinvoices: {

        amount:'',
       },
},
methods: {

    addRow: function (index) {
        try {
            this.rinvoices.splice(index + 1, 0, {});
        } catch(e)
        {
            console.log(e);
        }
    },
    removeRow: function (index) {
        this.rinvoices.splice(index, 1);
    },
    },

我遇到的错误是：

未在实例上定义
• $ index”
• 可排序指令绑定挂钩中的错误：“ TypeError：无法将未定义或null转换为对象”
• 错误编译模板：

我的观点是数量字段太多。