How to enable and disable next button in vue-form-generator based on user selections in a multi step form

Hi,
We are using vue-form-generator and implemented a multi steps screen to post an Ad/Trade for users to buy or sell items. Here is the code for the 2nd screen when users get to select different subscription packages(plans). That means users can use 6 Free Trades as a free plan and once they consume all the Free Trades plan, they will be able to buy a paid plan(package):

<!--This is a multi step(screens) form and first step is introduction screen and second step is where user enters 

a category and based on that category we prompts Next screen–>

    <tab-content v-if="step === 2">
        <div style="height: auto;" class="price_package">
            <p id="progres_radio" class="progress_bar1"></p>
            <p id="consumerTwoRadio" class="progress_percent2"></p>

            <h1 class="preview_adttl" style="margin-top: -24px;">Post Trade</h1>


            {% comment %} {% if plan_expires == 'expired' %}
            <p>Your current month plan is expired. please renew to new plan.</p>
            {% endif %} {% endcomment %}

            <div class="radio_select">
                <p class="head-trades" >Free Trades: </p>
                {% if planValue == "6" or freePackage == "True" %}
                    <p class="sixfreetrade">
                        <input type="radio" id="consumer" name="flag"
                             class="classnameee" value="6 Free Trades" disabled   >
                        {% if freePackage == "True" and consumed_ads_free == 6 %}             
                            <span style="position: relative;top: 22px;" > All 6 free trades are consumed.</span>
                            {% comment %} class="postad_p" Please select a paid subscription below if you want to post additional Trades {% endcomment %}
                        {% elif freePackage == "True" %}
                            <span style="position: relative;top: 22px;" >6 Free Trades </span>

                        {% endif %}
                        </p>
                {% elif planValue != "6" %}
                    <p class="sixfreetrade">
                        <input type="radio" id="consumer" name="flag"
                            v-model="subscribe" value="6 Free Trades">
                        <span style="position: relative;top: 22px;" >6 Free Trades  </span>
                    </p>
                {% endif %}
                <div style="position: relative;top: 15px;
                left: 23px;">

                </div>

                <div v-if="subscribe == '6 Free Trades'" style="position: relative;top: 28px;">
                    {% if cust_package %}
                    {% comment %} {% if freePackage == '6 Free Trades' %} {% endcomment %}
                    <p>* You consumed {{consumed_ads_free}} trades and left with {{package_value}} trades.</p>
                        
                                                    {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}

                    {% comment %} {% endif %} {% endcomment %}
                    {% endif %}
                    
                </div>
                <br>
                {% if cust_package == '6 Free Trades'  %}
                        <p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p>
                       {% comment %} {% elif cust_package == " "  %}
                        <p style="font-size: small;color: #921dcf;" ></p> {% endcomment %}
                        {% elif cust_package == "" %}
                        <p style="font-size: small;color: #921dcf;" >Subscribe for more Trades options will be enabled once you consume all 6 free trades</p> 

                        {% endif %}
                <hr style="position: relative;top: -4px;border-color: lightgray;">
                <p class="head-trades" style="top: -11px;"> Subscribe for more Trades:</p>
            {% if cust_package and package_value != 0%}
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                           type="radio" id="business"
                           name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
                </p>
                <div v-if="subscribe == '15 Trades for $6.99'">   
                    {% if cust_package %}
                    {% if cust_package == '15 Trades for $6.99' %}
                        {% if  package_value == 0 and cust_package == '15 Trades for $6.99' %}

                            <p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif  package_value != 0 and cust_package == '15 Trades for $6.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 15 trades.</p>
                    {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                           type="radio" id="business"
                           name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
                </p>
                <div v-if="subscribe == '30 Trades for $12.99'">
                    {% if cust_package %}
                    {% if cust_package == '30 Trades for $12.99' %}
                        {% if  package_value == 0 and cust_package == '30 Trades for $12.99' %}
                        
                        <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif  package_value != 0 and cust_package == '30 Trades for $12.99' %}
                        <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                        {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                        {% endif %}
                        
                    {% else %}
                    <p>* You consumed 0 trades and left with 30 trades.</p>
                    {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                           type="radio" id="business"
                           name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">120 Trades for $24.99 </span>
                </p>
                <div v-if="subscribe == '120 Trades for $24.99'">
                    {% if cust_package %}
                    {% if cust_package == '120 Trades for $24.99' %}
                        {% if package_value == 0 and cust_package == '120 Trades for $24.99' %}
                            
                            <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 0 and cust_package == '120 Trades for $24.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 120 trades.</p>
                    {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                    {% endif %}
                    {% endif %}
                </div>
            {% elif cust_package and package_value == 0 %}
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="15 Trades for $6.99" v-model="subscribe">
                    <span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
                </p>
                <div v-if="subscribe == '15 Trades for $6.99'">   
                    {% if cust_package %}
                    {% if cust_package == '15 Trades for $6.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
                            
                            <p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 15 trades.</p>
                    {% comment %} <p>* Want more ads in this month, please upgrade higher package</p> {% endcomment %}
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="30 Trades for $12.99" v-model="subscribe">
                    <span style="" class="Business_postadTrade">30 Trades for $12.99</span>
                </p>
                <div v-if="subscribe == '30 Trades for $12.99'">
                    {% if cust_package %}
                    {% if cust_package == '30 Trades for $12.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
                        
                        <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
                        <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                        <p>* Want more trades, please upgrade higher package</p>
                        {% endif %}
                        
                    {% else %}
                    <p>* You consumed 0 trades and left with 30 trades.</p>
                    <p>* Want more trades, please upgrade higher package</p>
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="120 Trades for $24.99" v-model="subscribe">
                    <span style="" class="Business_postadTrade">120 Trades for $12.99</span>
                </p>
                <div v-if="subscribe == '120 Trades for $24.99'">
                    {% if cust_package %}
                    {% if cust_package == '120 Trades for $24.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
                            
                            <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            <p>* Want more trades in this month, please upgrade higher package</p>
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 120 trades.</p>
                    {% comment %} <p>* Want more trades, please upgrade higher package</p> {% endcomment %}
                    {% endif %}
                    {% endif %}
                </div>
            {% else %}
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="15 Trades for $6.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">15 Trades for $6.99 </span>
                </p>
                <div v-if="subscribe == '15 Trades for $6.99'">   
                    {% if cust_package %}
                    {% if cust_package == '15 Trades for $6.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '15 Trades for $6.99' %}
                            
                            <p style = "color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 0 and cust_package == '15 Trades for $6.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            <p>* Want more trades in this month, please upgrade higher package</p>
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 15 trades.</p>
                    <p>* Want more trades in this month, please upgrade higher package</p>
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="30 Trades for $12.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">30 Trades for $12.99 </span>
                </p>
                <div v-if="subscribe == '30 Trades for $12.99'">
                    {% if cust_package %}
                    {% if cust_package == '30 Trades for $12.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '30 Trades for $12.99' %}
                        
                        <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 1 and cust_package == '30 Trades for $12.99' %}
                        <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                        <p>* Want more trades in this month, please upgrade higher package</p>
                        {% endif %}
                        
                    {% else %}
                    <p>* You consumed 0 trades and left with 30 trades.</p>
                    <p>* Want more trades in this month, please upgrade higher package</p>
                    {% endif %}
                    {% endif %}
                </div>
                <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                        type="radio" id="business"
                        name="flag" value="120 Trades for $24.99" v-model="subscribe" disabled>
                    <span style="" class="Business_postadTrade">120 Trades for $12.99</span>
                </p>
                <div v-if="subscribe == '120 Trades for $24.99'">
                    {% if cust_package %}
                    {% if cust_package == '120 Trades for $24.99' %}
                        {% if package_value == 1 or package_value == 0 and cust_package == '120 Trades for $24.99' %}
                            
                            <p style="color: #DB0038;">* You consumed {{consumed_ads}} Trades and left with {{package_value}} Trade  * Please upgrade higher subscription if you want more Trades to post</p>
                        {% elif package_value != 1 or package_value != 0 and cust_package == '120 Trades for $24.99' %}
                            <p>* You consumed {{consumed_ads}} trades and left with {{package_value}} trades.</p>
                            <p>* Want more trades in this month, please upgrade higher package</p>
                        {% endif %}
                    
                    {% else %}
                    <p>* You consumed 0 trades and left with 120 trades.</p>
                    <p>* Want more trades in this month, please upgrade higher package</p>
                    {% endif %}
                    {% endif %}
                </div>
            {% endif %}


                {% comment %} <p class="sixfreetrade">
                    <input style="position: relative;width: 4%;left: 1px;"
                           type="radio"
                           id="business" name="flag"
                           value="Unlimited for $99.00" v-model="subscribe">
                    <span style="" class="Business_postadTrade">Unlimited for $99.00</span>
                </p> {% endcomment %}
                {% comment %} <div v-if="subscribe == 'Unlimited for $99.00'">
                    {% if cust_package %}
                    {% if cust_package == 'Unlimited for $99.00' %}
                    <p>* You consumed {{consumed_ads}} ads and left with {{package_value}} ads.</p>
                    <p>* Want more ads in this month, please upgrade higher package</p>
                    {% else %}
                    <p>* You consumed 0 ads and left with Unlimited ads.</p>
                    <p>* Want more ads in this month, please upgrade higher package</p>
                    {% endif %}
                    {% endif %}
                </div> {% endcomment %}
                <span class="prev_next" style="top: 11px;left: 51%;">
                        <button class="prev_next_btn" @click.prevent="prev_first()">Previous</button>
                         
                        <button  class="step1_next"  style="position: relative; left: 0px;
                                                          top: 0px;"                          
                                @click.prevent="next_first()" 
                                :disabled="isdisabled" id="buttonDisabled">
                                Next
                        </button>

                </span>                   
           
            </div>
        </div>

As a next step, we need to add new logic or condition here: When the User consumed all 6 Free Trades, package_value becomes 0 (zero) and then the Next button is disabled. So the User is supposed to select paid plan(package) then ´Next´ button should be enabled, but we are stuck in this screen to enable and disable ´Next´ button for selecting a paid plan(package).

I´m new to vue-form-generator because the source code is inherited from the previous developer. I appreciate it if someone can review the above code and help us?

Thanks in advance

Hi,

Any vue-form-generator or vue expert here to help me with the above question?

Best regards,
RK