2

我正在尝试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即使单击“添加 1”按钮，值仍然始终显示 0。为什么这在 Vue Native 中不起作用？

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

2 回答 2

0

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

于 2020-06-11T05:23:38.710 回答
0

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

于 2019-12-14T23:01:28.800 回答