javascript - 获取数组值之和时如何修复[Object object]响应？

Question

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

如果用户分数低于25，推荐使用精华包。如果用户评分在25到50之间，推荐使用专业版套餐。如果用户评分在50分以上，推荐使用高级套餐。

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

当我尝试对属性求和时，得到以下响应:[对象对象][对象对象][对象对象][对象对象][对象对象][对象对象]

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

响应(无 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);