computed property within a Vue.component()

Question

I am learning Vue.js 2. I want to create a custom component like this: <bs-container fluid="true"></bs-container> and I would like Vue.component() to take care of the bootstrap 3 container classes behind the scenes based on the boolean value passed in the fluid prop, because <bs-container fluid="true"></bs-container> looks much cleaner than div class="container-fluid></div>. This is my attempt so far, but it's not working:

HTML:

<div id="app" >
<bs-container fluid="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</bs-container>

JS:

Vue.component('bs-container',{
props: ['fluid'],
template: '<div class="setClass"><slot></slot></div>',
computed: {
    setClass: function() {
        console.log('setClass has been called');
        if (this.fluid == true) {
            return 'container-fluid';
        } else{
            return 'container';
        }
    }
}
}); 
new Vue({
        el: '#app'
});

The setClass method is not being invoked. What am I missing?

Try with v-bind:class="setClass" or :class="setClass" on your template — yuriy636
– yuriy636, Commented May 27, 2017 at 19:21
And v-bind:fluid="false", otherwise you're binding to a string, not a boolean. With these 2 edits it will work fine. — Egor Stambakio
– Egor Stambakio, Commented May 27, 2017 at 19:24
@wostex that would defeat the purpose. I don't expect the user who will use the custom component <bs-container> to know anything about the VueJS. I am trying to keep the html side as much user-friendly as possible. How about this: I change the if-statement from this if (this.fluid == true) to if (this.fluid == 'true') this? — Tanmay
– Tanmay, Commented May 27, 2017 at 19:35
Okay by the time I posted the comment, there was already an answer — Tanmay
– Tanmay, Commented May 27, 2017 at 19:36

tony19 · Accepted Answer · 2022-07-15 02:28:24Z

1

You have to bind the class if you want to make it dynamic with computed property as you can see here https://v2.vuejs.org/v2/guide/class-and-style.html. Also I would check if the string passed is equal just avoid some nasty truthy falsy conversion.

Vue.component('bs-container',{
props: ['fluid'],
template: '<div :class="setClass"><slot></slot></div>',
computed: {
    setClass: function() {
        console.log('setClass has been called');
        if (this.fluid === 'true') {
            return 'container-fluid';
        } else{
            return 'container';
        }
    }
}
}); 
new Vue({
        el: '#app'
});

edited Jul 15, 2022 at 2:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 27, 2017 at 19:28

thepassenger

264 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

computed property within a Vue.component()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related