javascript - VueJS 2.0: Using V-if to Check the Existence of a Custom Prop - Stack Overflow

admin管理员组

文章数量:1319010

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

Share Improve this question Follow asked Mar 23, 2017 at 16:18 MosheMoshe 7,0212121 gold badges7676 silver badges137137 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.

本文标签： javascriptVueJS 20 Using Vif to Check the Existence of a Custom PropStack Overflow