按钮 v-on:click 在 Vue Native 中不起作用答案

【问题标题】：button v-on:click not functioning in Vue Native按钮 v-on:click 在 Vue Native 中不起作用
【发布时间】：2020-04-07 21:37:25
【问题描述】：

我正在尝试让button v-on:click 在 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;
}

counter 的值始终显示为 0，即使在多次单击“添加 1”按钮后也是如此。为什么 button v-on:click 不在 Vue Native 中工作？

编辑 #1：
正如@Suoakira 指出的按钮代码不正确，因此已更新如下：
<button v-on:click="counter++" title="Add 1" />
但是，counter 的值仍然始终显示为 0，即使在单击“添加 1”按钮后也是如此。为什么这在 Vue Native 中不起作用？

编辑 #2：
我还没有找到让v-on:click 在button 标签中的Vue Native 中工作的方法。但是，以下替代方法有效。它比原始帖子进一步发展。它演示了在touchable-opacity 中使用:on-press 的两种不同方式。如果有人知道如何在 Vue Native 中使用 v-on:click 和 button 标记来编写等效项，我肯定希望看到该解决方案。与此同时——

<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>

【问题讨论】：

stackoverflow.com/questions/41475447/… 的副本。

标签： vue-native

【解决方案1】：

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

【讨论】：

这是一个很好的观点。我更新了代码并对原始帖子进行了更新。但是，v-on:click 在单击时仍然没有将 1 加到 counter 变量中。
似乎 Eric day 已经发布了正确的解决方案 :) 。希望这有效v-on:click.native="counter++"
不幸的是，它不起作用。如果我找到解决方案，我一定会发布它。

【解决方案2】：

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

【讨论】：