Currently, I have implemented a modal that appears with a button on it. The text and functionality of the button change based on certain data conditions. To achieve this, I am utilizing computed properties to dynamically alter both the button text and its associated @click code. When a specific condition is met, the @click code is set to call another JavaScript method.
An issue arises where the function intended to be assigned to the button's @click event is automatically triggered as soon as the modal opens, which is not the desired behavior.
Here is the HTML code for the Vue component:
<button
variant="primary"
outline
type="button"
@click="continueButtonClick"
>
{{ continueButtonText }}
</button>
And here is the corresponding JS code:
computed: {
continueButtonClick() {
let vm = this;
let click = vm.close;
console.log("itemMapText: ", vm.item.itemMapText);
if(vm.item.itemMapText === "map_displayText_viewPriceInCart") {
click = vm.updateCartVue(vm.item.itemId);
}
return click;
},
continueButtonText() {
let vm = this;
let buttonText = "Continue Shopping";
if(vm.item.itemMapText === "map_displayText_viewPriceInCart") {
buttonText = "Remove From Cart";
}
return buttonText;
},
It should be noted that vm.close functions correctly and is only executed upon clicking the button.