admin管理员组文章数量:1321074
I am working on a wordpress plugin and i have a post type cause. I created some metabox in causes post type like minimum donation accepted and maximum donation accepted. Now i passed these values from PHP to take it from metaboxes and they are retrieving the values correctly. Here is my code for retrieving the values in form_components method
/**
* 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'),
),
);
}
You can see the show_min_max_donation and min_donation_amount and max_donation_amount and thse all the retrieving the values correctly but when i pass them to vue component they are showing as undefined.
<template>
<div>
<div class="wpcm-custm-amt-before-title">
<slot name="before_title"></slot>
<h3 v-if="title" class="wpcm-custm-amt-title">{{ title }}</h3>
</div>
<div class="wpcm-custom-amt-box-container">
<slot name="before_box"></slot>
<div class="wpcm-custm-amt-box" v-if="custom_amount">
<span v-if="symbol" class="wpcm-symbl-prefix">{{ getSymbol() }}</span>
<input
:value="amount"
@input="handleInput"
@keypress="isNumber($event)"
:placeholder="strings ? strings.donation_amount : 'Enter The Amount You Want'"
/>
<slot name="in_box"></slot>
</div>
</div>
<slot></slot>
<div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
</div>
</template>
<script>
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);
}
}
}
}
</script>
<style>
.error-message {
color: red;
margin-top: 10px;
}
</style>
What i am trying to do it that validate the input field that if the minimum or maximum values is greater than or less than the values which we set through metabox then it should throw an error and user will not be able to go to next step by clicking on next button. also here is my next button vue component:
<template>
<div>
<el-button
@click="handleProceed"
v-if="step < config.steps"
:disabled="campaign_ended"
>
{{ text || 'Proceed' }}
</el-button>
</div>
</template>
<script>
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.$storemit('next');
}
}
}
}
</script>
本文标签: wordpressUndefined upon passing information from PHP to vue componentStack Overflow
版权声明:本文标题:wordpress - Undefined upon passing information from PHP to vue component - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742080432a2419665.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论