javascript - 在另一个属性中引用元素属性

Question

我正在尝试访问动态属性 (:class) 内的属性 (fieldType, value)

<div fieldType="favoriteSports" 
     @click="update_favorite_sports" 
     value="Soccer"
     :class="{selected: sportsForm[fieldType].indexOf(value) != -1 }">
     Soccer
</div>

这会记录以下错误:

Property or method "fieldType" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

我想它期望 fieldType 是一个数据属性。

如何实现这一点，或者这是一种反模式？

Answer 1

使用 v-for 填充值会将整个对象暴露给模板语法

我假设你的对象系统，但它对于不同的结构是通用的。

<div
    v-for="sport in sports"
    :fieldType="sport.type"
    @click="update_favorite_sports(sport)" 
    :value="sport.name"
    :class="{selected: sportsForm[sport.type].indexOf(sport.name) != -1 }"
>
    Soccer
</div>

尽管说实话，您不再需要 value 和 fieldType 属性，除非您在某处引用它们。

这将允许您使用

methods: {
    update_favorite_sports (sport) {
        // Whatever your code is guessing something like
        let index = this.sportsForm[sport.type].indexOf(sport.name)
        if(index >= 0) {
            this.sportsForm[sport.type].splice(index, 1)
            return
        }
        this.sportsForm[sport.type].push(sport.name)
    }
}

这样 div 的作用就像一个单选按钮。