button v-on:click not functioning in Vue Native

Question

I'm trying to get button v-on:click to work in Vue Native but it is not updating the variable as expected. Here is the code in the App.vue file of a basic project:

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

The value of counter is always showing as 0, even after clicking the "Add 1" button several times. Why isn't button v-on:click working in Vue Native?

EDIT #1:
As @Suoakira pointed out the button code was incorrect so it has been updated follows:
<button v-on:click="counter++" title="Add 1" />
However, the value of counter is still always showing 0, even after clicking the "Add 1" button. Why isn't this working in Vue Native?

EDIT #2:
I have still not found a way to get v-on:click to work in Vue Native in the button tag. However, the following alternative works. It is further developed than the original post. It demonstrates two different ways to work with :on-press in touchable-opacity. If someone knows how to write the equivalent using v-on:click and the button tag in Vue Native, I'd sure like to see that solution. In the meantime -

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

Duplicate of https://stackoverflow.com/questions/41475447/vue-v-onclick-does-not-work-on-component. — Eric Day, Dec 14 '19 at 23:26

score 0 · Answer 1 · answered Dec 14 '19 at 23:01

0

Your data property is counter, but you are updating count on click.

answered Dec 14 '19 at 23:01

Suoakira

101
4

That is a very good point. I updated the code and made an update to the original post. However, `v-on:click` is still not adding 1 to the `counter` variable when clicked. – knot22 Dec 14 '19 at 23:19
Seems like Eric day has posted the correct solution :) . Hopefully that works `v-on:click.native="counter++"` – Suoakira Dec 15 '19 at 10:49
Unfortunately, it does not work. If I find a solution, I'll be sure to post it. – knot22 Dec 16 '19 at 01:31

score 0 · Answer 2 · answered Jun 11 '20 at 05:23

0

please try with :on-press="test" instead of v-on:click

answered Jun 11 '20 at 05:23

Choy

452
1
5
19

button v-on:click not functioning in Vue Native

2 Answers2