VueJS计算计算

Question

我目前正在使用VueJS创建一个小型计算器应用程序，这也是我第一次使用VueJS。

但是我想知道我是否真的做得对，因为我现在有以下代码：

export default{
name:'app',
data(){
    return{
        form:{
            sitetype:"Standard",
            designChoices:"Template",
            speed:"Less than 1 month",
            pages:1,
            copywriting:"",
            features:[]
        },
        options:{
             sitetype:[
                {text:"Standard",         price:{low:800, high:1500}},
                {text:"E-Commerce",       price:{low:2000,high:4000}},
                {text:"Custom Production",price:{low:5000,high:8000}}
            ],
            designChoices:[
                {text:"Template",     price:{low:200, high:500}},
                {text:"Custom Design",price:{low:1200,high:2000}}
            ],
            speed:[
                {text:"Less than 1 month",   price:{low:1000,high:3000}},
                {text:"Around 1 to 2 months",price:{low:500, high:1000}},
                {text:"More than 2 months",  price:{low:250, high:500}}
            ],
            features:[
                {id:"seo",price:{low:250,high:500}, text:"Search Engine Optimisation (SEO)"},
                {id:"smo",price:{low:400,high:800}, text:"Social Media Optimisation (SMO)"},
                {id:"mail",price:{low:150,high:300}, text:"Mail Setup"},
                {id:"gallery",price:{low:250,high:500}, text:"Image/Sliders Gallery"},
            ]
        }
    }
},
computed:{
//Calculate Mimimum Price
    calcMin(){
        var featuresPrice = 0,
            priceIndex = 0,
            copywriting = this.form.copywriting == "Yes" ? 2.5 : 1;
        //Feature Loop
        this.form.features.forEach(feature=>{
            this.options.features.forEach(featureCheck=>{
                if(feature == featureCheck.text){
                    featuresPrice += featureCheck.price.low
                    priceIndex++;
                }
            });
        });
        //Calculate all the values!
        var minPrice = featuresPrice + ((this.form.pages * 50) * copywriting);
        return minPrice;
    },
    //Calculate Maximum Price
    calcMax(){
        return "To Be Filled";
    }
  }
}

与此JSFiddle上的完整代码示例相比，此代码最小化：https://jsfiddle.net/RafaelDeJongh/d8dmheL8/

这里我想关注计算部分。我在这里使用循环来确认我的数据并从每个特征中检索总共12个的特征（但是对于这个例子只有4个，可以在jsfiddle上找到完整的功能）。

因此循环中的循环我因此确认每个部分使价格加起来，但是我还需要为其他3个组件执行此操作以及3个下拉框（sitetype，designChoices，Speed ）。

复制循环以获得此效果绝对不是我认为的正确方法，所以真正的问题是：我如何正确使用或更改我的代码，以便我可以正确提供数据以及使用价格链接为我的计算数据？

提前感谢您提供更多信息。

编辑：

现在我进一步了解并获得了这个代码用于计算：

computed:{
//Calculate Mimimum Price
    calcMin(){
        var copywriting = this.form.copywriting == "Yes" ? 2.5 : 1;
        var otherPrice = 0;
        for(var option in this.options) {
            if ("features" == option) {
                var featuresPrice = this.form[option].reduce((total,current)=>{
                    var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                    optionFeatures.forEach(check=>{otherPrice += check.price.low});
                    return otherPrice;
                },0);
            }else{
                for(var index in this.options[option]){
                    if(this.options[option][index].text == this.form[option]){
                        otherPrice += this.options[option][index].price.low;
                    }
                }
            }
        };
        //Calculate the price
        var minPrice = otherPrice + ((this.form.pages * 50) * copywriting);
        return minPrice;
    },
//Calculate Maximum Price
    calcMax(){
        var copywriting = this.form.copywriting == "Yes" ? 5 : 1;
        var otherPrice = 0;
        for(var option in this.options) {
            if ("features" == option) {
                var featuresPrice = this.form[option].reduce((total,current)=>{
                    var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                    optionFeatures.forEach(check=>{otherPrice += check.price.high});
                    return otherPrice;
                },0);
            }else{
                for(var index in this.options[option]) {
                    if(this.options[option][index].text == this.form[option]){
                        otherPrice += this.options[option][index].price.high;
                    }
                }
            }
        };
        //Calculate the price
        var maxPrice = otherPrice + ((this.form.pages * 150) * copywriting);
        return maxPrice;
    },
}

我的问题是，它是否可以更简单或更简单地编写，我可以将两种计算结合起来，只改变像price.low / price.high这样的几个变量吗？如果是这样，我将如何完成这项工作呢？

更新了JS小提琴：https://jsfiddle.net/RafaelDeJongh/d8dmheL8/4/

编辑2：

通过更多的工作和研究，我现在有以下代码：

methods:{
    calcPrice(isMin){
    //Calculate CopyWriting
        var copywriting = this.form.copywriting == "Yes" ? (isMin ? 2.5 : 5) : 1;
        //Calculate Features
            var otherPrice = 0;
            for(var option in this.options){
                if ("features" == option){
                    var featuresPrice = this.form[option].reduce((total,current)=>{
                        var optionFeatures = this.options[option].filter(featureCheck => featureCheck.text == current);
                        optionFeatures.forEach(check=>{
                            otherPrice += isMin ? check.price.low : check.price.high;
                        });
                        return otherPrice;
                    },0);
                }else{
                //Calculate Options
                    for(var index in this.options[option]){
                    var getOption = this.options[option][index];
                        if(getOption.text == this.form[option]){
                            otherPrice += isMin ? getOption.price.low : getOption.price.high;
                        }
                    }
                }
            };
            //Calculate The Total Price + Pages
            var price = otherPrice + ((this.form.pages * (isMin ? 50 : 150)) * copywriting);
            return price;
    }
},
computed:{
    //Calculate Mimimum Price
    calcMin(){return this.calcPrice(true);},
    //Calculate Maximum Price
    calcMax(){return this.calcPrice(false);}
}

更新了JSFiddle：https://jsfiddle.net/RafaelDeJongh/d8dmheL8/5/

所以我想知道是否可以进一步优化或更改此代码以使其在VueJS方面更好？或者这段代码可以接受吗？