javascript - Why passing empty string to Vue component Boolean props considered truthy? - Stack Overflow

Please see this minimum example, I have a simple ponent like this

HelloWorld.vue

<template>
  <div v-if="show">I will show even if show prop is passed as empty string</div>
</template>

<script>
  export default {
    props: {
      show: Boolean,
    },
  };
</script>

Now, If I do this to that ponent

App.vue

<template>
  <div>
    <HelloWorld :show="show" />
  </div>
</template>

<script>
  import HelloWorld from "./ponents/HelloWorld";

  export default {
    data() {
      return {
        show: "",
      };
    },
    ponents: {
      HelloWorld,
    },
  };
</script>

It will render out that string!

Why is this happening?

An empty string is considered falsy but is truthy in the Vue ponent, that's quite weird.

I probably get why it does this way because now you are enabled to do this

<template>
  <div>
    <!-- you can just write show -->
    <HelloWorld show />
  </div>
</template>

However, I think the template-piler should do this thing because take a look at JSX

It supports the shorthand at piler level, so I was wondering why Vue design like this.

Please see this minimum example, I have a simple ponent like this

HelloWorld.vue

<template>
  <div v-if="show">I will show even if show prop is passed as empty string</div>
</template>

<script>
  export default {
    props: {
      show: Boolean,
    },
  };
</script>

Now, If I do this to that ponent

App.vue

<template>
  <div>
    <HelloWorld :show="show" />
  </div>
</template>

<script>
  import HelloWorld from "./ponents/HelloWorld";

  export default {
    data() {
      return {
        show: "",
      };
    },
    ponents: {
      HelloWorld,
    },
  };
</script>

It will render out that string!

Why is this happening?

An empty string is considered falsy but is truthy in the Vue ponent, that's quite weird.

I probably get why it does this way because now you are enabled to do this

<template>
  <div>
    <!-- you can just write show -->
    <HelloWorld show />
  </div>
</template>

However, I think the template-piler should do this thing because take a look at JSX

It supports the shorthand at piler level, so I was wondering why Vue design like this.

• javascript
• vue.js

Share Improve this question Follow asked Sep 10, 2020 at 15:10 JosephJoseph 4,78588 gold badges4040 silver badges8080 bronze badges 6

• Bigger question, why are you typing the variable as a boolean but assigning a string to it? – Taplar Commented Sep 10, 2020 at 15:12
• It's a mon use case, say if you have an input type text element, it's default value might be an empty string, what if I want to render something once user fill out the input, this is one use case. – Joseph Commented Sep 10, 2020 at 15:15
• That's pletely different. You have a show variable here that you are typing as a boolean with the intention of setting it to true if it should show, and false if it should not. Setting it as a non-boolean doesn't make sense. – Taplar Commented Sep 10, 2020 at 15:16
• If you are going to store actual string values in the element, and use the length of the string to derive the truthy state of it, then it should be typed as string and not boolean. – Taplar Commented Sep 10, 2020 at 15:17
• If it's really that not making sense, why Vue did not throw a warning about it? – Joseph Commented Sep 10, 2020 at 15:18

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 6

Vuejs use Boolean props as in HTML, where empty string will be considered as true

They wrote it in their documentation