VueJs add json object to array – VueJs push data into array Example

VueJs add json object to array – VueJs push data into array Example

Simple One can send here Supported POST data, PUT data, PATCH data, and DELETE data requests just as easily.

[php]
this.$set(this.attendees, data.userToken, data);
[/php]

Vue.set( target, key, value ) with Example

Arguments:
[php]

{Data Object | Array} target
{Data string | number} key
{Data any} value

[/php]

include The Libs..
[php]
jquery-2.1.4.min.js
bootstrap.min.js
underscore-min.js
bootstrap.min.css
[/php]

index.html

[php]

  • {{ myproduce.name }} {{ myproduce.price }}



All total ()
Cart empty

  • {{ item.qty }} × {{ item.name }} {{ item.price }}


  • [/php]

    READ :  Vuejs Dynamic Displaying Lists v-for directive

    index.js

    [php]
    var v = new Vue({
    el: ‘body’,
    data: {
    realmyproduces: [
    {‘id’: 1, ‘name’: ‘myproduce 1’, ‘price’: 12.95},
    {‘id’: 2, ‘name’: ‘Other myproduce’, ‘price’: 4.35}
    ],
    my_RealCartitem: []
    },
    computed: {
    mycount: function() {
    return this.my_RealCartitem.length;
    },
    All total: function() {
    return _.reduce(this.my_RealCartitem, function(n, cart_item) {
    return cart_item.price * cart_item.qty + n;
    }, 0).toFixed(2);
    }
    },
    methods: {
    notInCart: function(myproduce) {
    var ids = _.pluck(this.my_RealCartitem, ‘id’);
    return !_.contains(ids, myproduce.id);
    },
    addToCart: function(myproduce) {
    var cart = Vue.util.extend({}, myproduce);
    var ids = _.pluck(this.my_RealCartitem, ‘id’);

    if (!_.contains(ids, myproduce.id)) {
    cart.qty = 1;
    this.my_RealCartitem.push(cart);
    }
    },
    addRealQty: function(myproduce) {
    myproduce.qty = myproduce.qty +1;
    },
    deleteQty: function(myproduce) {
    myproduce.qty -= 1;
    if (myproduce.qty <= 0) {
    this.my_RealCartitem.$remove(myproduce);
    }
    }
    }
    });
    [/php]

    style.css

    [php]
    body {
    background-color: #D3D3D3;
    }
    [/php]

    Demo Example

    Leave a Reply

    Your email address will not be published. Required fields are marked *