最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

wordpress - Undefined upon passing information from PHP to vue component - Stack Overflow

programmeradmin5浏览0评论

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>

发布评论

评论列表(0)

  1. 暂无评论