按钮v-on：单击在Vue Native中不起作用

Question

我正在尝试获取按钮v-on：单击以在Vue Native中工作，但它没有按预期更新变量。以下是基本项目的App.vue文件中的代码：

<template>
    <view class="container">
        <button v-on:click="count += 1" title="Add 1" />
        <text>{{ counter }}</text>
    </view>
</template>

<script>
export default {
  data: function() {
    return {
      counter: 0
    };
  }
};
</script>

<style>
.container {
  flex: 1;
  align-items: center;
  justify-content: center;
}

即使多次单击添加1按钮，计数器的值始终显示为0。为什么按钮v-on：单击不能在Vue Native中工作？

编辑#1:
正如@Suoakira所指出的，按钮代码不正确，因此已更新如下：


编辑#2:
我仍然没有找到一种方法来获取v-on：单击按钮标记中的以在Vue Native中工作。但是，以下替代方案可行。它比原来的职位得到了进一步的发展。它演示了使用的两种不同方式：按可触摸不透明度中的。如果有人知道如何使用Vue Native中的v-on:click和按钮标记编写等效代码，我肯定希望看到该解决方案。同时-

<template>
    <view class="container">      
        <touchable-opacity class="button" :on-press="() => counter++">
            <text class="button-text">Add 1</text>
        </touchable-opacity>
        <touchable-opacity class="button" :on-press="addTwo">
            <text class="button-text">Add 2</text>
        </touchable-opacity>
        <touchable-opacity class="button" :on-press="resetCounter">
            <text class="button-text">Reset</text>
        </touchable-opacity>
        <text>{{ counter }}</text>
    </view>
</template>

<script>
export default {
  data: function() {
    return {
      counter: 0
    }
  },
  methods: {
    addTwo: function() {
      this.counter += 2;  
    },
    resetCounter: function() {
      this.counter = 0;      
    }
  }
};
</script>

<style>
.container {
  align-items: center;
  padding-bottom: 30px;
}
.button {
  width: 100px;
  height: 35px;
  background-color: #FFCE00;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.button-text {
  font-size: 18px;
  font-weight: 700;
}
</style>




Answer 1

请尝试使用：on press=“test”而不是v-on:click

Answer 2

您的数据属性是计数器，但您正在单击时更新计数。