Javascript （VueJs）我能'；在vuejs中不使用方法？

嗨，我想做一个网站，我有一个家和一个“巴西”的组成部分。我使用vue路由器在家和巴西之间切换。在巴西有一个计算器，但我不能使用脚本标记中使用的方法。计算器应该要求输入分数，然后在用户单击平均值时计算平均值。计算是正确的。按钮坏了。有人知道问题出在哪里吗？ 代码如下：

<template>

  <div>
    Brazil
    <h2>Grade-Calculator </h2>
    <div id="calculator">
      <ul>
        <li v-for="(g,idx) in grades" :key="idx">{{idx+1}}. Grade : {{g}}</li>
      </ul>
      <div>
        <label>New Grade: </label>
        <input type="text" v-model="newGrade" />
        <button v-on:click="addGrade()">Ok</button>
      </div>
      <br>
      <div>
        <button v-on:click="calcAvg()">Average</button>
        <p>Average: {{ sum }}</p>
      </div>
  </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: "Brazil",
  props: {}
};
new Vue({
    el: '#calculator',
    data: {
      grades: [],
      newGrade: 0,
      avg: 0
      //TEST
    },
    methods: {
      addGrade: function () {
        this.grades.push(this.newGrade)
        this.newGrade = 0
      },
      calcAvg: function () {
        let sum = 0;
        for (var i = 0; i < this.grades.length; i++) {
          let zahl = parseInt(this.grades[i]);
          sum = sum + zahl;
        }
        //calculate average and print it
        console.log(sum)
        console.log(this.grades.length)
        return sum / this.grades.length;
      }
    }
  })
</script>

巴西
等级计算器

{{{idx+1}。等级：{{g}

新职系：
好啊


平均值
平均值：{{sum}

从“Vue”导入Vue
导出默认值{
名称：“巴西”，
道具：{}
};
新Vue({
el:“#计算器”，
数据：{
职系：[]，
新等级：0，
平均值：0
//试验
},
方法：{
addGrade:函数（）{
this.grades.push（this.newGrade）
此值为0.newGrade=0
},
calcAvg：函数（）{
设和=0；
对于（var i=0；i

由于您使用的是vueCLI，因此无需再次声明app元素，因为它将在“src”目录中的“app.vue”组件中为您声明。将脚本更改为：

<script>
    export default {
        name: "Brazil",
        props: {},

        data: {
           return {
              grades: [],
              newGrade: 0,
              avg: 0,
              sum: 0,
              //TEST
           }
        },
        methods: {
          addGrade: function () {
            this.grades.push(this.newGrade)
            this.newGrade = 0
          },
          calcAvg: function () {
            let sum = 0;
            for (var i = 0; i < this.grades.length; i++) {
              let zahl = parseInt(this.grades[i]);
              sum = sum + zahl;
            }
            //calculate average and print it
            console.log(sum)
            console.log(this.grades.length)
            this.sum = sum / this.grades.length;
          }
        }
    };
</script>

导出默认值{
名称：“巴西”，
道具：{}，
数据：{
返回{
职系：[]，
新等级：0，
平均值：0，
总数:0,，
//试验
}
},
方法：{
addGrade:函数（）{
this.grades.push（this.newGrade）
此值为0.newGrade=0
},
calcAvg：函数（）{
设和=0；
对于（var i=0；i

一些小的调整就可以了

数据：{
职系：[]，
新等级：0，
平均值：0，
sum:0，//添加此
},

更改此项：

返回和/this.grades.length；

为此：

this.sum=sum/this.grades.length；

您可以直接在

导出默认值

部分中添加

数据

和

方法

部分，如下所示

export default {
  name:"Brazil",
  props:[], // add properties here
  data:()=>{
      return {
         // create your data variables here
      }
  },
  methods:{
     // create your methods here
  }
}

---

在Vue.js组件结构中，

html

模板部分与它旁边的

导出默认值关联。当您在模板内使用方法时，它将检查
导出默认值
部分的
方法
部分中的方法。
您试图在同一组件上同时使用两种不同的模式！一个是SFC（单文件组件），另一个是呈现一个新的Vue实例，该实例替换现有DOM中的特定元素

从你发布的内容来看，不清楚你在家里是如何使用它的。但是，您似乎正在导出一个非常基本的对象（带有名称和空的
道具）然后您正在已导出的SFC中创建一个新的Vue实例

Vue非常灵活，您可以让它正常工作，但这可能是一个您并不真正想要的复杂问题

我做了一些小的其他修复：


我替换了平均函数
我删除了您引用的
sum
方法，但尚未创建
固定类型转换（不要在JavaScript中使用
parseInt
。使用
Number（）
！）
还有一些细节我记不得了


下面是您的组件如何使用
Vue.component（）
声明：


Vue.config.productionTip=false；
Vue.config.devtools=false；
Vue.component（'计算器'{
模板：`
等级计算器

{{{key+1}}。Grade:{{g}

新职系：
添加


平均值：{{Average}

`,
名称：'计算器'，
数据：（）=>({
职系：[]，
新等级：0，
平均值：0
//试验
}),
计算：{
平均值（）{
返回this.grades.length？`${this.calcAvg（this.grades）}`:“n/a”；
}
},
方法：{
calcAvg（等级）{
返回等级。减少（（a，b）=>编号（a）+编号（b），0）/grades.length；
},
addGrade（）{
this.grades.push（this.newGrade）；
此值为0.newGrade=0；
}
}
});
新Vue({
el:“#应用程序”
})

您是否使用
addGrade
without（）进行了尝试？出现了什么错误？
新的Vue
部分不应位于
.Vue
文件中。传递给
Vue
构造函数的大多数配置选项应该在组件定义中。我建议使用Vue CLI构建一个框架项目，这样您就可以了解项目的布局。请问，您使用的是Vue CDN还是VueCLI？太好了，这意味着您使用的是Vue CLI，我将很快更新我的答案。检查一下。@JEA你想在添加新成绩后自动计算平均值吗？@是的，我想在添加新成绩后计算平均值immediately@JEA在
this.newGrade=0
之后添加
this.calcAvg（）
：）感谢它即使在vue路由器上也能正常工作。不知道为什么，但它是有效的。谢谢XD。