Question

我正在尝试让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;
}

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

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

编辑＃2：
我仍然没有找到一种方法v-on:click来使button在Vue Native中工作。但是，以下替代方法。它比原始职位进一步发展。它演示了:on-press中使用touchable-opacity的两种不同方式。如果有人知道如何在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>

Answer 1

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

Answer 2

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

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

2 个答案: