Не определено при передаче информации из PHP в компонент vue ⇐ Php

[Anonymous]

Я работаю над плагином WordPress, и у меня есть причина, связанная с типом сообщения. Я создал метабокс в типах сообщений о причинах, таких как минимальное принятое пожертвование и максимальное принятое пожертвование. Теперь я передал эти значения из PHP, чтобы получить их из метабоксов, и они правильно извлекают значения. Вот мой код для получения значений в методе form_comComponents
/**
* Form components.
*
* @return array
*/
public function form_components()
{
$settings = wpcm_get_settings();
$currencies = $this->getCurrencies();
$post_id = isset($_POST['id']) ? $_POST['id'] : '';
$causes_settings = get_post_meta($post_id, 'causes_settings', true);

// Unserialize the data to access individual settings
$causes_data = maybe_unserialize($causes_settings);
$show_min_max_donation = isset($causes_data['show_min_max_donation']) ? $causes_data['show_min_max_donation'] : 0;
$amount_min_donation = isset($causes_data['min_donation_amount']) ? $causes_data['min_donation_amount'] : 0;
$amount_max_donation = isset($causes_data['max_donation_amount']) ? $causes_data['max_donation_amount'] : 0;
$post_type = $post_id ? get_post_type($post_id) : '';
return array(
'amounts' => $this->getPredefinedAmount(),
'currencies' => $currencies,
'base_currency' => $settings->get('base_currency', 'USD'),
'symbols' => $this->currency_symbols($currencies),
'symbol' => webinane_currency_symbol(),
'show_currency_dropdown' => $post_type === 'membership' ? false : $settings->get('donation_multicurrency'), //false
'show_amounts' => $post_type === 'membership' ? false : $settings->get('donation_predefined_amounts'), //false
'custom_amount' => $post_type === 'membership' ? false : $settings->get('donation_custom_amount'), //false
'show_recurring' => $settings->get('donation_recurring_payments'),
'show_custom_dropdown' => $settings->get('enable_custom_dropdown'),
'show_causes_dropdown' => $settings->get('enable_funds_causes_dropdown'),
'causes_list' => $this->get_causes_list(),
'donation_custom_dropdown' => $settings->get('donation_custom_dropdown'),
'show_min_max_donation' => $show_min_max_donation,
'min_donation_amount' => $amount_min_donation,
'max_donation_amount' => $amount_max_donation,
'format_price' => array(
'position' => $settings->get('currency_position', 'left'),
'sep' => $settings->get('thousand_saparator', ''), // Thousand Separator
'd_sep' => $settings->get('decimal_separator', '.'), // Decimal separator
'd_point' => $settings->get('number_decimals', 0) // Decimal numbers
),
'strings' => array(
'how_much' => esc_html__('How much would you like to donate?', 'lifeline-donation-pro'),
'recurring' => esc_html__('Recurring', 'lifeline-donation-pro'),
'one_time' => esc_html__('One Time', 'lifeline-donation-pro'),
'donation_amount' => esc_html__('Enter the Amount you want to donate', 'lifeline-donation-pro'),
),
);

}

Вы можете видеть show_min_max_donation, min_donation_amount и max_donation_amount и все эти значения корректно извлекаются, но когда я передаю их компоненту vue, они отображаются как неопределенные.




{{ title }}



{{ getSymbol() }}





{{ errorMessage }}




const { mapState, mapMutations } = window.Vuex;

export default {
props: ['custom_amount', 'title', 'symbol', 'symbols', 'strings', 'display_amount'],
data() {
return {
formData: window.donationFormData || {}, // Use embedded data or default to an empty object
errorMessage: ''
};
},
computed: {
...mapState(["amount", "currency", "recurring"]),
},
methods: {
...mapMutations(["setAmount"]),
getSymbol() {
return (this.symbols[this.currency] !== undefined) ? this.symbols[this.currency] : this.symbol;
},
isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
},
handleInput(event) {
const value = parseFloat(event.target.value);
const minAmount = parseFloat(this.formData.min_donation_amount);
const maxAmount = parseFloat(this.formData.max_donation_amount);

if (this.formData.show_min_max_donation) {
if (value < minAmount) {
this.errorMessage = `The minimum donation amount is ${minAmount}.`;
this.setAmount('');
} else if (value > maxAmount) {
this.errorMessage = `The maximum donation amount is ${maxAmount}.`;
this.setAmount('');
} else {
this.errorMessage = '';
this.setAmount(value);
}
} else {
this.errorMessage = '';
this.setAmount(value);
}
}
}
}



.error-message {
color: red;
margin-top: 10px;
}


Что я пытаюсь сделать, это проверить поле ввода: если минимальные или максимальные значения больше или меньше значений, которые мы установили через метабокс, тогда оно должно выдать ошибку и пользователь не сможет перейти к следующему шагу, нажав кнопку «Далее». также вот мой следующий компонент button vue:



{{ text || 'Proceed' }}





const { mapState } = window.Vuex;

export default {
props: {
text: String,
campaign_ended: {
type: Boolean,
default: false
},
error_message: {
type: String,
default: 'Target has been achieved'
}
},
computed: {
...mapState(['step', 'config', 'validationError'])
},
methods: {
handleProceed() {
if (this.campaign_ended) {
this.$message({
message: this.error_message,
type: 'error',
duration: 5000,
showClose: true
});
} else if (this.validationError) {
this.$message({
message: 'Please correct the errors before proceeding.',
type: 'error',
duration: 5000,
showClose: true
});
} else {
this.$store.commit('next');
}
}
}
}




Подробнее здесь: https://stackoverflow.com/questions/793 ... -component