是否可以将参数传递给用于类和样式绑定的计算属性

Question

我有一系列旅行者(例如[2,0,0]=>2名成年人，0名青少年，0名儿童(，我用它们来构建我的模板

<div v-for="(person, i) in travelers" :key="i" class="uk-width-1-3@m">
<div class="uk-card-body">
<button
class="uk-button uk-button-small uk-margin-right"
@click="changeTravelers({index: i, value: travelers[i]-1})"
:class="{
'uk-disabled uk-button-default': travelers[i] == 0 || (curOcc !== 1 && curOcc <= minOcc),
'uk-button-primary': travelers[i] > 0 && (curOcc > minOcc || curOcc >= minOcc && travelers[i] === 1 && travelers[i+1] !== 1 && travelers[i+2] !== 1 && travelers[i-1] !== 1 && travelers[i-2] !== 1)
}"
>-</button>
<span>{{ travelers[i] }}</span>
<button
class="uk-button uk-button-small uk-margin-left"
@click="changeTravelers({index: i, value: travelers[i]+1})"
:class="{'uk-disabled uk-button-default': curOcc >= maxOcc, 'uk-button-primary': curOcc < maxOcc}"
>+</button>
</div>
</div>

我想在template中实现这么多逻辑是不好的做法，而且看起来真的很尴尬。相反，我希望使用具有计算属性的类和样式绑定。

styleMinusButton() {
return {
'uk-disabled uk-button-default': this.travelers[i] == 0 || (curOcc !== 1 && curOcc <= minOcc),
'uk-button-primary': travelers[i] > 0 && (curOcc > minOcc || curOcc >= minOcc && travelers[i] === 1 && travelers[i+1] !== 1 && travelers[i+2] !== 1 && travelers[i-1] !== 1 && travelers[i-2] !== 1)
}
}

但是如何访问v-for的i？我可以把它当作论据吗？还是有一个不同的更好的解决方案？

提前感谢！

Answer 1

如果需要参数，则需要编写方法，而不是计算属性。

<button :class="styleMinusButton(i)">...</button>

methods: {
styleMinusButton(i) {
const { travelers, curOcc, minOcc } = this
return {
'uk-disabled uk-button-default': travelers[i] == 0 || (curOcc !== 1 && curOcc <= minOcc),
'uk-button-primary': travelers[i] > 0 && (curOcc > minOcc || curOcc >= minOcc && travelers[i] === 1 && travelers[i+1] !== 1 && travelers[i+2] !== 1 && travelers[i-1] !== 1 && travelers[i-2] !== 1)
}
}
}