Учитывая следующий HTML:
<template v-for = "(child, index) in group">
<div :class = "{'border-pink-700 bg-gray-100 ': selected === child.id}">
<div>Container Content</div>
</div>
</template>
Есть ли способ переместить привязку класса из HTML, учитывая, что она зависит от условия, переданного через цикл v-for
(child.id
)?
В документах упоминается возможность связывать вычисляемые свойства, но я понимаю, что они не принимают аргументы (и я не смог заставить это работать таким образом).
Вы можете использовать метод и передать элемент методу:
<div :class = "classes(child)">
setup() {
...
const classes = (child) => {
return {
'border-pink-700 bg-gray-100': selected.value === child.id
}
}
return {
...
selected,
classes
}
}
Если вы использовали Vue 2 или API параметров:
methods: {
classes(child) {
return {
'border-pink-700 bg-gray-100': this.selected === child.id
}
}
}
Обязательно избегайте изменения свойств экземпляра в методе, но чтение допустимо.