Передача копии свойства данных функции в Vue JS

Передача копии свойства данных функции в Vue JS

06.01.2016 03:50:23 Просмотров 45 Источник

У меня есть простой экземпляр vue, который я использую для создания маркера Stripe.

Это выглядит примерно так:

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
            },
        },       
    });

В основном я передаю объект cardв моем экземпляре Vue (который привязан к некоторым входам формы) к card.createTokenметод createToken. Это должно принять входные данные и вызвать обработчик, передавая ответ, как он это делает.

Все это прекрасно работает, кроме этой card.createTokenизменяет объект card и вызывает изменение объекта card на моем экземпляре Vue-он вставляет свои собственные свойства и вызывает странное поведение на связанных <inputs>.

Есть ли способ передать свойство cardvue Stripe как копию, которая не привязана к экземпляру vue и поэтому не изменится в результате?

Обновление

По сути, это происходит потому, что JavaScript передает объекты как копию ссылки, что означает, что исходный объект может быть изменен любой функцией, которая его получает. Очевидное решение-клонировать объект с помощью цикла или каким-то другим способом, но мне было интересно, есть ли лучший способ в Vue.

javascript vue.js
У вопроса есть решение - Посмотреть?

Ответы - Передача копии свойства данных функции в Vue JS / Passing a copy of a data property to a function in Vue JS

Sukima

06.01.2016 03:57:02

Не то чтобы я много знал о Вике.js но это this.data-это просто объект JavaScipt, тогда вы можете клонировать его с помощью этого:

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

Или в земле ES3:

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

Но это неглубокий клон, поэтому объекты, являющиеся свойствами объекта obj, не будут клонироваться, но их ссылки будут одинаковыми (что позволяет мутацию).

jQuery (если у вас есть это) также предоставляет удобный способ сделать это:

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

И напоследок как @oleg-melashko указал на Vue.Ж. С. Имеет Vue.util.extendтакже (хотя в документации, по-видимому, отсутствует какая-либо ссылка на это).

var clone = Vue.util.extend({}, this.data);
Источник
Является ответом!
oleh.meleshko

06.01.2016 03:57:56

Существует много способов сделать копию этого объекта, но только один-из самого Vue:

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

Это фактически эквивалент расширения jQuery с глубоким набором в true.

Источник
https://stackoverflow.com/questions/34633610/passing-a-copy-of-a-data-property-to-a-function-in-vue-js/34633769#comment57012587_34633769
похоже, что это самый лаконичный метод, хотя эта проблема кажется немного банальной для исправления
https://stackoverflow.com/questions/34633610/passing-a-copy-of-a-data-property-to-a-function-in-vue-js/34633769#comment57012638_34633769
@harryg это недокументированная встроенная функция, но она доступна, поэтому мы можем ее использовать ;)
Yegor

27.04.2016 08:09:08

В Vue 1.0.12 есть функция принудительного крючка для свойств

Он может быть использован для создания такого клона объекта (ES6)

import _ from 'lodash';
export default{
    props: {
        myObjProp: {
            type: Object,
            coerce(val) {
                return _.clone(val);
            }
        }
    }
};
Источник
Shehan Rangana

25.12.2019 09:01:11

Вы также можете скопировать объект карты, как показано ниже

let cardCopy = JSON.parse(JSON.stringify(this.card));
Источник

Другие вопросы

Ответы на ваши вопросы

Закрыть X