Question

我正在使用VUE JS，由于某种原因，我没有在视图上显示新项目。如果我使用推送方法，没有任何反应。如果我使用这个。$ set（'productos'，producto）项目会显示，但当我尝试将另一个项目推送到数组时，前一项目将被删除。

new Vue({


    el: '#ticket',

    data:{
        newCodigo:{
            codigo: '',
        },

        productos:[],

    },



    computed:{
        errors: function(){
            for(var key in this.newCodigo){
                if(! this.newCodigo[key])
                    return true;
            }
            return false;
        }
    },


    methods:{

        addProducto: function(){
            var codigo = this.newCodigo;
            this.$http.post('/api/addProducto', codigo).success(function(producto){

                this.productos.push(producto);
                //this.$set('productos',producto);
            });
        }
    }
});

我可以从数据库中检索数据，但它不会显示在视图上。

<div class="container">
<div class="row">
    <div id="ticket">
        <form action="POST" v-on:submit.prevent="addProducto">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" > 
            <div class="form-group">
                <label for="Codigo">
                    Escanea:
                    <span class="error" v-if="! newCodigo.codigo">*</span>
                </label>
                <input type="text" name="codigo" id="codigo" class="form-control" v-model="newCodigo.codigo">
            </div>
        </form>
        <article v-for="producto in productos" :data="productos">

            <h3>@{{producto.descripcion}}</h3>

            <h3>@{{producto.precio}}</h3>
        </article>
    </div>
</div>

Answer 1

在ajax调用的回调函数中，this未指向vm实例。只需将其更改为：

this.$http.post('/api/addProducto', codigo).success(function (producto) {
    this.productos.push(producto);
}.bind(this));

如何使用Vue JS向数组添加项目？

1 个答案: