Javascript 如何在列表中添加空索引并使用vuejs和axios增加索引

我从一个json数组中获取数据，并在其上循环以显示要在数据库中更新的表单。我使用v-for来显示信息，我想添加或删除索引，并查看表单上的呈现

我创建了一个方法来添加索引，但控制台返回我

0: {…}
1: {__ob__: Observer}
2: {__ob__: Observer}
3: {label: "", description: "", price: "", qtn: ""}
length: 4

索引0包含元数据（供应商名称、日期），索引3是新的，不可观察 怎么办

Json示例：

var v = {
    0: {
        'name': 'Alexis',
        'name_seller': 'Test',
        'price': 859,
        'tva': 20,
        'ect...': 'ect',
    },
    1: {
        'label': 'Site wordpress',
        'description': 'blablabla',
        'price': 400,
        'qtn': 2,
    },

    2: {
        'label': 'Extension wordpress',
        'description': 'blablabla',
        'price': 59,
        'qtn': 1,
    }
}

Html（我使用laravel）：

如果我点击.btn；我有索引，但我想他没有被vuejs理解，我的输入没有顺序 你能帮助我吗？

---

提前感谢您抽出时间，祝您度过愉快的一天

按索引更新数组不起作用。看见您可以使用

this.info.push

来代替。谢谢，它可以与

Vue.set（updatePdf.info，3，'test'）

一起使用。我之前查看了文档，发现v-for组合v-if，但我滚动得太快了。现在我必须调整它，再次感谢：）按索引更新数组将不起作用。看见您可以使用

this.info.push

来代替。谢谢，它可以与

Vue.set（updatePdf.info，3，'test'）

一起使用。我之前查看了文档，发现v-for组合v-if，但我滚动得太快了。现在我必须调整它，再次感谢：）

 <a href="javascript:void(0)" @click="[[inc()]]" class="btn btn-alt btn-sm btn-success" data-toggle="tooltip" data-original-title="Ajouter"><i class="fa fa-plus"></i></a>


<input type="hidden" value="{{$type}}" id="type">
<input type="hidden" value="{{$box->id}}" id="boxId">

<!-- start block fields & boucle js -->
<div class="block" v-for="(value, i) in info" v-bind:key="i.id" v-if="i != 0" style="margin-bottom:45px;">

    <div class="block-title">
        <h2>Référence n°[[i]] </h2>
    </div>

    <!-- start fields -->
    <div class="form-horizontal form-bordered">

        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Libellé *</label>
            <div class="col-md-9">
                <input type="text" class="form-control" :name="'label'+[[i]]" :value="[[value.label]]">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Description</label>
            <div class="col-md-9">
                <textarea rows="4" type="text" class="form-control" :name="'description'+[[i]]">[[value.description]]</textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Prix *</label>
            <div class="col-md-9">
                <input type="number" step="0.01" class="form-control" :name="'price'+[[i]]" :value="[[value.price]]">
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-3 control-label" for="example-text-input">Quantité *</label>
            <div class="col-md-9">
                <input type="number" step="0.01" class="form-control" :name="'qtn'+[[i]]" :value="[[value.qtn]]">
            </div>
        </div>


    </div>
    <!-- end fields -->

</div>
<!-- end boucle & block -->

var updatePdf = new Vue({
    el: '#updatePaper',
    delimiters: ['[[', ']]'],
    data: {
        info: null,
        id: document.querySelector('#boxId').value,
        type: document.querySelector('#type').value,
    },
    methods: {
        inc() {
            this.info[this.info.length] =  {
                'label': '',
                'description': '',
                'price': '',
                'qtn': '',
            }
            console.log(this.info, this.info.length)
        }
    },
    mounted() {
        axios
            .get('/get/doc/' + this.type + '/' + this.id)
            .then(response => (this.info = response.data))
    },
});