Passing a copy of a data property to a function in Vue JS

Question

I have a simple vue instance that I'm using to generate a Stripe token.

It looks like this:

var vm = new Vue({
        el: '#checkout-form',
        data: {
            stripe_publishable_key: '{{ config('services.stripe.publishable') }}',
            card: {
                number: null,
                cvc: null,
                exp: null,
            },
        },
        ready: function() {    
            Stripe.setPublishableKey(this.stripe_publishable_key);
        },
        methods: {
            getStripeToken: function() {
                Stripe.card.createToken(this.card, this.stripeResponseHandler);
            },
            stripeResponseHandler: function(status, response) {
                // Process response
            },
        },       
    });

Basically I pass the card object in my Vue instance (which is bound to some form inputs) to Stripe's card.createToken method. This should take the input and call the handler, passing in the response as it does so.

This all works fine except that card.createToken is modifying the card object and causing the card object on my Vue instance to change - it inserts its own properties and causes strange behaviour on the bound <inputs>.

Is there a way to pass the card vue property to Stripe as a copy which is unbound to the vue instance and thus won't change as a result?

Update

In essence this is happening because JavaScript passes objects as a copy-of-a-reference which means the original object can be modified by any function that receives it. The obvious solution is to clone the object by looping or some other means but I was wondering if there's a better way in Vue.

score 5 · Accepted Answer · answered Jan 06 '16 at 12:57

5

There are many ways to make a copy of this object, but only one from Vue itself:

var cardCopy = Vue.util.extend({}, this.card);

It is actually an equivalent to jQuery's extend with deep set to true.

answered Jan 06 '16 at 12:57

oleh.meleshko

4,675
2
27
40

seems like the most concise method, albeit this problem seems a little hacky to fix – harryg Jan 06 '16 at 13:03
@harryg it's undocumented built in function but it's accessible so we can use it ;) – oleh.meleshko Jan 06 '16 at 13:05

Sukima · Answer 2 · 2016-01-06T13:04:51.550

Not that I know much Vie.js but is this.data is simply a JavaScipt object then you could clone it with this:

function cloneObject(obj) {
  var clone = {};
  Object.keys(obj).forEach(function(key) {
    clone[key] = obj[key];
  });
  return clone;
}

Or in ES3 land:

function cloneObject(obj) {
  var key, clone = {};
  for (key of obj) {
    if (obj.hasOwnProperty(key) {
      clone[key] = obj[key];
    }
  }
  return clone;
}

But this is a shallow clone so objects that are properties of the obj would not be cloned but their references would be the same (allowing mutation).

jQuery (if you have that) also provides a convenient way to do this:

var clone = $.extend({}, this.data);

And finally as @oleg-melashko pointed out Vue.js has a Vue.util.extend as well (though the documentation seems to lack any reference to this).

var clone = Vue.util.extend({}, this.data);

score 1 · Answer 3 · answered Dec 25 '19 at 06:01

1

You can also copy the card object like below

let cardCopy = JSON.parse(JSON.stringify(this.card));

answered Dec 25 '19 at 06:01

Shehan Rangana

360
6
9

score 0 · Answer 4 · answered Apr 27 '16 at 05:09

There is coerce hook function for properties in Vue 1.0.12

It can be used for creation of object clone like that (ES6)

import _ from 'lodash';
export default{
    props: {
        myObjProp: {
            type: Object,
            coerce(val) {
                return _.clone(val);
            }
        }
    }
};

Passing a copy of a data property to a function in Vue JS

4 Answers4