获取数组值的总和时如何修复 [Object object] 响应？

Question

我正在尝试使用 vuejs 和 vuetify 进行评分调查。我使用步进器组件和选择来从用户那里获得答案。根据用户的评分，最后推荐一个服务包。

如果用户分数低于 25，建议使用 Essentials 包。 如果用户评分在 25 到 50 之间，推荐使用 pro 套餐。 如果用户评分为50或以上，推荐使用高级套餐。

到目前为止，我已经能够将所有答案推送到一个名为“questionAnswer”的空数组中。我有一个名为 questionId ('i') 的属性，其中包含给定答案的分数。

当我尝试对属性求和时，我得到以下响应：[Object object][Object object][Object object][Object object][Object object][Object object]

这是控制台中的响应，第一个块是 questionId 的值，第二个块是我尝试对数组值求和时的响应。

响应（无 JSON 解析）

这是我在脚本标签中的代码，每个问题都有自己的响应数组。 items1 到 items 7 数组包含响应，这些响应被推送到一个名为 questionAnswer 的新数组中。

export default {
data () {
  return {
    e1: 1,
    steps: 8,
    vertical: false,
    altLabels: false,
    editable: true,
    value: null,
    items1: [{ id: 50, name: "As soon as possible (Less than 1 hour)", val: 50 }, {id: 25, name: "A quick response time (Less than 2 hours)", val: 25}, {id: 0, name: "Moderately fast (Less than 6 hours)", val: 0}],
    items2: [{id: 50, name: 'Yes (Premium only)', val: 50 }, {id: 0, name: 'No', val: 0}],
    items3: [{id: 50, name: 'Yes (Premium and Professional)', val: 50}, {id: 0, name: 'No', val: 0}],
    items4: [{id: 25, name: 'Yes (Premium only)', val: 25}, {id: 0, name: 'No', val: 0}],
    items5: [{id: 25, name: 'Extensive (Premium)', val: 25}, {id: 0, name: 'Basic', val: 0}],
    items6: [{id: 25, name: 'Yes (Premium and Professional)', val: 0}, {id: 0 , name: 'No', val: 0}],
    items7: ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','District of Columbia','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Puerto Rico','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'],
    items8: ['1 - 10', '10 - 25', '25 - 50', '50 - 100', '100 - 500', ' 500+ '],
    questionAnswer: [],
  }
},

watch: {
  steps (val) {
    if (this.e1 > val) {
      this.e1 = val
    }
  },
  vertical () {
    this.e1 = 2
    requestAnimationFrame(() => this.e1 = 1) // Workarounds
  },
},

methods: {
  onInput (val) {
    this.steps = parseInt(val)

  },
  nextStep(n) {
    if (n === this.steps) {
      this.e1 = n
    } else {
      this.e1 = n + 1
    }
  },

submit(){

console.table(JSON.parse(JSON.stringify(this.questionAnswer)));

  var response1 = "Premium Package";
  var response2 = "Pro Package";
  var response3 = "Essentials Package";
  var response4 = "There are questions missing, please select a valid answer";
  var response5 = "An error occured, please refresh your browser page";

    const add = (a, b) =>
                  a + b

    const sum = this.questionAnswer.reduce(add)
    console.table(sum);

  if (sum >= 50){

    window.alert(response1);
  } else if(sum <= 50 && sum >= 25) {

    window.alert(response2);
  } else if(sum < 25){

    window.alert(response3);
  }
},

addAnswer(i){  
    this.questionAnswer.push({
      questionId: i,         
    })    
}, 

}

也许我应该使用不同的方法？我还探索了搜索某些值的可能性。例如，如果用户给出的答案值为 50，则应向该用户显示“高级包”。我还尝试使用find() 方法进行数组搜索，但即使该值存在，它也会返回false。我有一种不好的感觉，我在这里遗漏了一些东西。也许我需要转换为不同的对象类型，或者我在这里走得太远了？我花了太多时间试图解决这个问题，任何能让我挽救这段代码的见解都将不胜感激，感谢您的宝贵时间。

Answer 1

以下是对对象数组中对象的属性求和的方法。我写了一个简单的例子，你可以应用到你自己的代码中。

var obj = [
  { value: 5 },
  { value: 3 },
  { value: 2 },
  { value: 8 }
];

var sum = obj.reduce((a, b) => a + b.value, 0);

console.log(sum);