Передача копии свойства данных функции в Vue JS
У меня есть простой экземпляр 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>
.
Есть ли способ передать свойство card
vue Stripe как копию, которая не привязана к экземпляру vue и поэтому не изменится в результате?
Обновление
По сути, это происходит потому, что JavaScript передает объекты как копию ссылки, что означает, что исходный объект может быть изменен любой функцией, которая его получает. Очевидное решение-клонировать объект с помощью цикла или каким-то другим способом, но мне было интересно, есть ли лучший способ в Vue.
Ответы - Передача копии свойства данных функции в Vue JS / Passing a copy of a data property to a function in Vue JS

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

06.01.2016 03:57:56
Существует много способов сделать копию этого объекта, но только один-из самого Vue:
var cardCopy = Vue.util.extend({}, this.card);
Это фактически эквивалент расширения jQuery с глубоким набором в true.




25.12.2019 09:01:11
Вы также можете скопировать объект карты, как показано ниже
let cardCopy = JSON.parse(JSON.stringify(this.card));