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?

Answer 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'
});