I have created a custom modal ponent using VueJS 2.0 with a prop of 'close'. I basically have it working like I want, but would like to improve it a bit.

One feature I have is the option to add a close button as follows:

Add a custom prop of close="true" in the HTML

<modal close="true">
Etc...
</modal>

Use a V-IF conditional statement in the JS file

<button v-if="close == 'true'></button>

The result is that if the property of close is set to true then the close button appears, if not it does not. This is what I want and it works.

My question is can I simplify this solution so that I can simply set the html as follows: <modal close>...</modal>.

Then I would simply check if the property of close exists. I tried to do so using <button v-if="close"></button>, but that did not work.

So, what I'd like to know is if this is possible and (if so) how to do it.

Thanks in advance for any help you can offer.

I have created a custom modal ponent using VueJS 2.0 with a prop of 'close'. I basically have it working like I want, but would like to improve it a bit.

One feature I have is the option to add a close button as follows:

Add a custom prop of close="true" in the HTML

<modal close="true">
Etc...
</modal>

Use a V-IF conditional statement in the JS file

<button v-if="close == 'true'></button>

The result is that if the property of close is set to true then the close button appears, if not it does not. This is what I want and it works.

My question is can I simplify this solution so that I can simply set the html as follows: <modal close>...</modal>.

Then I would simply check if the property of close exists. I tried to do so using <button v-if="close"></button>, but that did not work.

So, what I'd like to know is if this is possible and (if so) how to do it.

Thanks in advance for any help you can offer.

• javascript
• vue.js
• vuejs2
• vue-ponent

1 Answer 1

If you set the default of the property to be false, then you can check whether the property is exactly false to determine whether or not to show the button:

props: {
  close: {
    default: false,
  },
}

Then you can check like this:

<button v-if="close !== false"></button>

When you add the close property to the modal ponent without specifying a value, the value will equal an empty string: ''. So, it won't be equal to false, and will thus display the close button.