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

【问题标题】：Reference element property within another property在另一个属性中引用元素属性
【发布时间】：2017-01-30 19:36:26
【问题描述】：

我正在尝试访问动态属性 (: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 是一个数据属性。

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

【问题讨论】：

这是动态生成的现场系统吗？你有什么理由不能使用:class="{selected: sportsForm['favoriteSports'].indexOf('Soccer') != -1 }"？
@JustinMacArthur 是的，我正在寻找将其抽象为 v-for 的解决方案。可以想象，将有超过 20 种运动，动态插入
好的，你用什么变量来填充fieldType和value，因为你应该能够将它传递给类选择器。我会写一个答案来展示它是如何工作的。

标签： javascript vue.js vuex

【解决方案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 就像一个单选选择一样。

【讨论】：