Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

disabled property in Button component accepts string value.

See original GitHub issue

System Information

OS: OS X El Capitan version 10.11.6 Browser: Google Chrome 65.0.3325.181（Official Build）（64 bit） bootstrap-vue: 2.0.0-rc.8",

Description

Hi According to the bootstrap-vue document disabled property accepts only boolean values. But there is a case that disabled property accepts string value.

Test Code

<template>
  <b-button
    :disabled="disable">Button</b-button>
</template>

<script>
import Vue from 'vue';
import bButton from 'bootstrap-vue/es/components/button/button';

Vue.component('b-button', bButton);

export default {
    data() {
        return {
            disable: 'disabled',
        };
    },
};
</script>

Result

No errors in console

Expected Result

Expect to output this kind of error message ?

[Vue warn]: Invalid prop: type check failed for prop "disabled". Expected Boolean, got String.

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

emanuelmutschlechnercommented, Apr 19, 2018

@dany0502 your first comment was clear enough. I understand that the docs are a little bit confusing, if you don’t know the implementation details of Vue. Vue property validation is based on HTML specifications, where specific values are considered truthy even if their type is not Boolean.

See this response of the creator of Vue, explaining why '' is indeed a valid Boolean prop: https://github.com/vuejs/vue/issues/4710

Further check this link and you will understand why 'disabled' is valid: https://github.com/vuejs/vue/blob/7116af4e07520040ed7328c39d0a456808bfe1e1/src/platforms/web/util/attrs.js#L22

1reaction

emanuelmutschlechnercommented, Apr 18, 2018

I don’t see any problem here. This is a feature of Vue which provides different ways to disable elements. It’s not BootstrapVue related.

<b-button :disabled="true">Button</b-button>
<b-button :disabled="'disabled'">Button</b-button>
<b-button :disabled="''">Button</b-button>
<b-button disabled>Button</b-button>
<!-- result -->
<button type="button" disabled="disabled" class="btn btn-secondary disabled">Button</button>

Please close this issue