Level 32
<tr v-for="customer in customers">
<td v-bind:class="{ bg-danger: customerStatusIsTwo(customer)}"> {{ customer.name}}
</tr>
in your Vue methods
customerStatusIsTwo : function(customer){
return customer.status == 2
}
2 likes
Oct 7, 2016
8
Level 3
Vue.js Add Class if specific property is set to a specific value
Hey Guys I need some help as my title says. I want to add a class if a customer has a status of 2.
<table>
<tr>
<td> Customer Name</td>
</tr>
<tr v-for="customer in customers">
<td v-if="customer.status == 2 : class='bg-danger'"> {{ customer.name}}
</tr>
</table>
But this code example does not work.
Level 3
Im getting an error here
Vue warn]: Invalid expression. Generated function body: {scope.bg-scope.danger:scope.customerIsBlacklisted(scope.customer)}
<tr v-for="customer in customers">
<td v-bind:class="{bg-danger: customerIsBlacklisted(customer)}">{{ customer.id }}</td>
Level 32
can I have a look at your Vue code?
Level 3
is_blacklisted is a property on the customer object
<script>
export default{
data(){
return{
customers: [],
search_form: {
type: '',
filter: '',
},
unsubscribe_form: {
email: '',
errors: [],
}
}
},
methods : {
customerIsBlacklisted : function (customer) {
return customer.is_blacklisted == 1;
},
getCustomers(){
this.search_form.type = $('#search').val();
this.search_form.filter = $('#filter').val();
this.$http.post('/customer', this.search_form).then(response => {
this.customers = response.data.customer;
});
},
showUnsubscribeForm(){
$('#unsubscribeForm').modal('show');
},
unsubscribe(){
this.$http.post('/customer/unsubscribe', this.unsubscribe_form).then(response => {
$('#flash-message').fadeIn(300);
$('#flash-message').html('<div class="row"><div class="col-md-8 col-md-offset-2"><div class="alert-success alert">'+response.data.message+'</div></div></div>');
$('#flash-message').delay(3200).fadeOut(300);
$('#unsubscribeForm').modal('hide');
}).catch(response => {
if (typeof response.data === 'object') {
this.unsubscribe_form.errors = _.flatten(_.toArray(response.data.errors));
} else {
this.unsubscribe_form.errors = ['Something went wrong. Please try again.'];
}
});
}
}
}
</script>
<tr v-for="customer in customers">
<td v-bind:class="{bg-danger: customerIsBlacklisted(customer)}">{{ customer.id }}</td>
<td>{{ customer.firstname }}</td>
<td>{{ customer.lastname }}</td>
<td>{{ customer.email }}</td>
<td>{{ customer.city }}</td>
<td>{{ customer.postalcode }}</td>
<td>{{ customer.updated_at }}</td>
<td>{{ customer.status }}</td>
<td>
<a href="/customer/{{ customer.id }}/edit" class="btn btn-primary">Info</a>
</td>
</tr>
Level 32
sorry it should be
<td v-bind:class="{'bg-danger': customerIsBlacklisted(customer)}">{{ customer.id }}</td>
2 likes
Level 3
Ah got i figured thx mate :)
1 like
Level 1
<tr v-for="customer in customers">
<td v-bind:class="{'bg-danger': customerIsBlacklisted(customer)}">{{ customer.id }}</td>
</tr>
Can simply be formatted without the use of methods like so:
<tr v-for="customer in customers">
<td : class="{'bg-danger' : (customer==2) }"> {{customer.name}} </td>
</tr>
I guess this would be useful for someone coming in next....
Level 1
@wtoalabi This doesn't seem to work, I tried:
<button class="button button--default {'active' : (isEnabled) }">{{ $t('Enabled') }}</button>
<button class="button button--default {'active' : (!isEnabled) }">{{ $t('Disabled') }}</button>
And I got a console error:
- class="button button--default {{ if isEnabled }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
Please or to participate in this conversation.