我目前正在使用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方面更好？或者这段代码可以接受吗？