The two uniapp button method names are the same

With the popularity of mobile applications, the need for cross-platform development is becoming more and more urgent, and uniapp, as a cross-platform development framework based on Vue.js and small programs, is loved by developers. However, when I was using uniapp to develop an application recently, I encountered a problem: the method names of the two buttons are the same, so one of the buttons cannot trigger the corresponding method. Why is this?

1. Problem description

In an application developed through uniapp, there are two buttons that need to trigger different methods, but the method names are the same, as shown below:

<template>
  <view>
    <button class="btn" @tap="submitHandler">提交</button>
    <button class="btn" @tap="submitHandler">重置</button>
  </view>
</template>

<script>
  export default {
    methods: {
      submitHandler() {
        console.log('提交');
      }
    }
  }
</script>

In In the above code, the method names of the two buttons are submitHandler. At this time, clicking the "Submit" button can trigger the method normally, but clicking the "Reset" button cannot trigger the method.

2. Cause Analysis

To address this problem, we first need to clarify a concept, which is component reuse. In uniapp, a component can be reused multiple times, and a new instance is created each time it is used. For example, in the above code, both buttons use the same method, so the two buttons also use the same instance.

In Vue.js, if the method names in the component are not unique, Vue.js will merge these methods into one method, and only one of the methods will be called when this method is called. In uniapp, if the method names in the component are not unique, then uniapp will not merge these methods into one method. Each method exists separately, but since the same instance is used, when one of the methods is executed , other methods with the same name can no longer be executed.

3. Solution

Based on the above reason analysis, we can come up with a solution: just give these two methods different names.

<template>
  <view>
    <button class="btn" @tap="submitHandler">提交</button>
    <button class="btn" @tap="resetHandler">重置</button>
  </view>
</template>

<script>
  export default {
    methods: {
      submitHandler() {
        console.log('提交');
      },
      resetHandler() {
        console.log('重置');
      }
    }
  }
</script>

In the above code, we changed the original submitHandler method to the resetHandler method, so that this problem can be solved.

4. Summary

Through solving this problem, we can see that the implementation of uniapp is different from Vue.js, which leads to some strange problems. Therefore, when using uniapp, we need to pay attention to these details and follow some best practices of Vue.js, such as giving methods unique names. I hope this article can help everyone.

The above is the detailed content of The two uniapp button method names are the same. For more information, please follow other related articles on the PHP Chinese website!