Question

我正在尝试访问动态属性（fieldType）

中的属性（value，:class）

<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就像无线电选择一样。

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

1 个答案: