我如何从函数中更改数据值？答案

【问题标题】：How con i change data value from a function?我如何从函数中更改数据值？
【发布时间】：2022-01-12 12:15:14
【问题描述】：

我想每次点击更改计数变量。如果我将“count++”放在 on:clik 事件中，它会起作用。但是，当我想使用一个函数时不会做任何事情。我也尝试将组件和“新视图”放在同一个文件js中，但不起作用并显示空白页，为什么？谢谢

Prova.js

Vue.component('prova', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<div><button v-on:click="Add">You clicked me {{ count }} times.</button></div>',
    methods:{
        Add: function(){
           prova.count++;
        }
    }

});

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>prova component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script type="text/javascript" src="Prova.js"></script>

</head>
<body>
<section id="prova">
    <prova ></prova>

<script>
    new Vue({
        el: "#prova",
    })
</script>
</section>
</body>
</html>

【问题讨论】：

prova.count++ - 没有 prova 变量。应该是this，不是吗？
是的，这是解决方案，但我知道为什么我第一次尝试时它不起作用。谢谢

标签： vue.js components

【解决方案1】：

其实我不知道你的第二个component是什么，但是你可以这样解决你的问题：

在模板中

<template>
  <div>
    <button @click="addCount()"></button>
    <div>You have clicked the button {{count}} times.</div>
  </div>
</template>

• @click 与 v-on:click 相同

• 你应该这样写：addCount()

在脚本中：

export default {
  data() {
    return {
      count: 0,
    }
  },

  methods: {
    addCount() {
      this.count += 1;
    }
  }
}

• 在您的数据中定义count

• 使用方法并在按钮上的每个click 上将当前值加1

这应该可以解决您的问题。如果这对你有用，请给我一个简短的反馈！

对于小测试：您也可以从 count 中减去。只需创建第二个button 并在其中使用this.count -= 1 进行另一个点击事件。每次点击它都会减 1。

【讨论】：