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

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 就像收音机一样 select。