Vue.js中Next按钮的禁用与启用逻辑实现咨询

• 页面加载完成时，Next按钮默认处于禁用状态；选中一个单选按钮后，Next按钮变为启用状态。
• 基于条件控制Next按钮的禁用与启用：

{% if cust_package == '6 Free Trades'  %}
所有6次免费交易用完后，"订阅更多交易选项"将被启用
{% comment %} {% elif cust_package == " "  %}
{% endcomment %}
{% elif cust_package == "" %}
所有6次免费交易用完后，"订阅更多交易选项"将被启用
{% endif %}
<hr style="position: relative;top: -4px;border-color: lightgray;">
<p class="head-trades" style="top: -11px;"> 订阅更多交易：</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 class="Business_postadTrade">15次交易，售价$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;">* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易 * 如需发布更多交易，请升级更高等级订阅</p>
        {% elif  package_value != 0 and cust_package == '15 Trades for $6.99' %}
            <p>* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易。</p>
            {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</p> {% endcomment %}
        {% endif %}

    {% else %}
    <p>* 您已使用0次交易，剩余15次交易。</p>
    {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</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 class="Business_postadTrade">30次交易，售价$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;">* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易 * 如需发布更多交易，请升级更高等级订阅</p>
        {% elif  package_value != 0 and cust_package == '30 Trades for $12.99' %}
        <p>* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易。</p>
        {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</p> {% endcomment %}
        {% endif %}

    {% else %}
    <p>* 您已使用0次交易，剩余30次交易。</p>
    {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</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 class="Business_postadTrade">120次交易，售价$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;">* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易 * 如需发布更多交易，请升级更高等级订阅</p>
        {% elif package_value != 0 and cust_package == '120 Trades for $24.99' %}
            <p>* 您已使用{{consumed_ads}}次交易，剩余{{package_value}}次交易。</p>
            {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</p> {% endcomment %}
        {% endif %}

    {% else %}
    <p>* 您已使用0次交易，剩余120次交易。</p>
    {% comment %} <p>* 如需本月发布更多广告，请升级更高等级套餐</p> {% endcomment %}
    {% endif %}
    {% endif %}
</div>

默认状态下Next按钮为禁用，点击单选按钮后Next按钮变为启用。

内容的提问来源于stack exchange，提问作者Narender Parikapalli