title: Vue.js - how to properly conditionally set click handler code
body: <p>Currently, I have a modal that pops up with a button on it.  Depending on some data coming down, I am changing the text and functionality of the button on the modal.  I am using a computed to change the button text and another computed to change the button <code>@click</code> code.  If the condition is true, it sets the button's <code>@click</code> code to another javascript method.</p>
  
  <p>I'm finding that as soon the modal gets opened, that function that is supposed to be getting attached to the <code>@click</code> of the button is actually getting called and run.  Obviously, this is not what I want.</p>
  
  <p>Vue component HTML code:</p>
  
  <pre><code>&lt;button
    variant="primary"
    outline
    type="button"
    @click="continueButtonClick"
  &gt;
    {{ continueButtonText }}
  &lt;/button&gt;
  </code></pre>
  
  <p>Vue component JS code:</p>
  
  <pre><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;
    },
  </code></pre>
  
  <p>Also, the <code>vm.close</code> does seem to be getting properly attached as that only runs when the button is clicked.</p>