Dynamically hide component upon selecting a country in checkout
Create a custom component by extending Magento_Ui/js/form/element/abstract
.
Vendor_Module/view/frontend/web/js/custom-component.js
:
define([
'Magento_Ui/js/form/element/abstract'
], function (Component) {
'use strict';
return Component.extend({
defaults: {
imports: {
update: 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset.country_id:value'
}
},
update: function (value) {
this.visible(value !== 'NL');
}
});
});
This will result in the update
function executing every time the value of the selected country changes. The new value is passed as a parameter.
Now use this component in your js layout instead of abstract
:
'component' => 'Vendor_Module/js/custom-component'