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 stackoverflow.com/questions/41475447/….

Eric Day
– Eric Day

2019-12-14 23:26:34 +00:00
Commented Dec 14, 2019 at 23:26 — Eric Day
– Eric Day, Commented Dec 14, 2019 at 23:26

Suoakira · Accepted Answer · 2019-12-14 23:01:28Z

0

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

answered Dec 14, 2019 at 23:01

Suoakira

1015 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

knot22 Over a year ago

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.

Suoakira Over a year ago

Seems like Eric day has posted the correct solution :) . Hopefully that works v-on:click.native="counter++"

knot22 Over a year ago

Unfortunately, it does not work. If I find a solution, I'll be sure to post it.

Choy · Accepted Answer · 2020-06-11 05:23:38Z

0

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

answered Jun 11, 2020 at 5:23

Choy

4921 gold badge5 silver badges19 bronze badges

Collectives™ on Stack Overflow

button v-on:click not functioning in Vue Native

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related