Default casting of Boolean prop #3
Comments
|
+1, default values should apply when omitting a boolean property. Another example: MyButton.vue: <template>
<button :class="{ red: red }">My Button</button>
</template>
<style scoped>
button.red {
background: red;
}
</style>
<script>
export default {
name: "MyButton",
props: {
red: {
type: Boolean,
default: true
}
}
};
</script>main.js: import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import MyButton from "./components/MyButton.vue"
new Vue({
render: h => h(MyButton),
}).$mount('#app')
const CustomElement = wrap(Vue, MyButton)
window.customElements.define('my-button', CustomElement)index.html: <body>
<div id="app"></div>
<my-button></my-button>
<!-- built files will be auto injected -->
</body>result: This is not consistent and makes the use of boolean properties very difficult for the moment. |
|
This is an anti-pattern actually: https://eslint.vuejs.org/rules/no-boolean-default.html |
|
Interesting... This anti-pattern comes from a very popular library which is using eslint-vue. I wonder why it has not been spotted before. Anyway, the issue remains that this case should be handled the same way between vue and vue-web-component-wrapper. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Using the version of vue-web-component-wrapper included with Vue cli version
3.0.0-beta.1I have noticed a strange / not documented behaviour of the auto casting of Boolean Props:
a prop defined as:
will be set to false if the prop is omitted in the web component tag:
I understand that this may be the expected behaviour in the case of web-components but since it differ from what happens in normal Vue development I think it should be documented.
The text was updated successfully, but these errors were encountered: