Vue.js 计算属性过滤答案

【问题标题】：Vue.js Computed Property FilteringVue.js 计算属性过滤
【发布时间】：2019-08-08 10:15:42
【问题描述】：

我有一个 Vue.js 计算属性，如下所示。

odds() {
    let race = this.data.events.runners.filter(item => item.course === this.course && item.time === this.time)
    let runner = race[0].data.filter(item => item.name === this.runner)
    return runner[0].odds
}

虽然它返回预期值，但我认为它看起来很脏。任何人都可以建议编写此代码的最佳方法。

示例 JSON 如下。

{
    "courses": [{
        "type": "horses",
        "course": "Exeter"
    }],
    "runners": [{
        "course": "Exeter",
        "time": "14:10",
        "data": [{
            "number": "1",
            "name": "White Lilac",
            "odds": "6\/1"
        }, {
            "number": "2",
            "name": "Sauvignon",
            "odds": "5\/1"
        }, {
            "number": "3",
            "name": "Foxy Lass",
            "odds": "33\/1"
        }, {
            "number": "4",
            "name": "Hot Ryan",
            "odds": "8\/1"
        }, {
            "number": "5",
            "name": "Arqalina",
            "odds": "11\/8"
        }, {
            "number": "6",
            "name": "Presenting Lucina",
            "odds": "14\/1"
        }, {
            "number": "7",
            "name": "Persistantprincess",
            "odds": "12\/1"
        }, {
            "number": "8",
            "name": "Windy Bottom",
            "odds": "20\/1"
        }, {
            "number": "9",
            "name": "Shotgun Sally",
            "odds": "33\/1"
        }, {
            "number": "10",
            "name": "Rule The Ocean",
            "odds": "9\/1"
        }, {
            "number": "11",
            "name": "Avithos",
            "odds": "12\/1"
        }, {
            "number": "12",
            "name": "Monet Moor",
            "odds": "16\/1"
        }]
    }]
}

我想知道是否有更好的方法来做到这一点。提前致谢。

【问题讨论】：

那是无效的示例 JSON...
@tony19 我更新了我的问题。请立即检查。
您只期待客户端的建议吗？你有能力从后端更改 JSON 结构吗？
@ShyamBabu 是的，我只期待 1 个客户端建议。是的，我完全有能力做出任何改变
我想要的是从选择下拉列表中选择跑步者时，我需要将其赔率值分配给另一个文本框。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您现有的代码已经足够好了。但是一项更改是您的课程和时间使其成为唯一字段，因此始终只有一个索引，因此最好尽早退出。（您可以为未找到自己添加错误检查）。

var requiredCourse = (courseDetails)=>courseDetails.course === this.selectedCourse && courseDetails.time === this.selectedTime;
var requiredhorse = (horse)=> horse.name === this.runner;

var courseIndex = data.findIndex(requiredCourse);
var horseOdds = data[courseIndex].data.findIndex(requiredhorse);
console.log(data[courseIndex].data[horseOdds])

但是如果你有能力改变 JSON 结构的话。然后直接将课程和时间作为键，这样您就可以直接访问而无需过滤或查找索引。希望这会让你觉得它更干净一些。

【讨论】：