У меня есть некоторые данные, которые доступны через:
{{ content['term_goes_here'] }}
... и это оценено как true
или false
. Я'd, как, чтобы добавить класс В зависимости от truthiness выражения вроде так:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
где правда
дает мне класс и ложь даст мне ФА-флажок-пустой-структура Альфа-флажок-помеченные
. Так, как я написал выше дает мне ошибку:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
Как я пишу это, чтобы иметь возможность условно определить класс?
Используйте [синтаксис] объект1.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
Когда объект становится более сложной, распакуйте его в метод.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Наконец, вы могли бы сделать эту работу за любую собственность, как этот контент.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
<i class="fa" v-bind:class="cravings"></i>
и добавить в вычисляемые :
computed: {
cravings: function() {
return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
}
}
Почему бы не передавать объект в-связать:класс для динамического переключения класса:
<div v-bind:class="{ disabled: order.cancelled_at }"></div>
Это то, что рекомендуется по вю документацию.
проблема лезвием, попробуйте это
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>