Üzerinden erişilebilen bazı verilerim var:
{{ content['term_goes_here'] }}
... ve bu true
ya da false
olarak değerlendirildi. İfadenin doğruluğuna bağlı olarak aşağıdaki gibi bir sınıf eklemek istiyorum:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
burada true
bana fa-checkbox-marked
sınıfını verir ve false bana fa-checkbox-blank-outline
sınıfını verir. Yukarıda yazdığım şekilde hata alıyorum:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
**Sınıfı koşullu olarak belirleyebilmek için nasıl yazmalıyım?
Nesne söz dizimi]1'i kullanın.
v-bind:class="{'fa-checkbox-marked': content['cravings'], 'fa-checkbox-blank-outline': !content['cravings']}"
Nesne daha karmaşık hale geldiğinde, onu bir yönteme dönüştürün.
v-bind:class="getClass()"
methods:{
getClass(){
return {
'fa-checkbox-marked': this.content['cravings'],
'fa-checkbox-blank-outline': !this.content['cravings']}
}
}
Son olarak, bunu aşağıdaki gibi herhangi bir içerik özelliği için çalıştırabilirsiniz.
v-bind:class="getClass('cravings')"
methods:{
getClass(property){
return {
'fa-checkbox-marked': this.content[property],
'fa-checkbox-blank-outline': !this.content[property]
}
}
}
sorun bıçaktır, şunu deneyin
<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>