Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name

I’m trying to execute a function after clicking, but I don’t understand where the problem occurred.
Beginner programmer
I hope everyone can give me some ideas


  "name": "myApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  "dependencies": {
    "@capacitor/android": "^3.1.1",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "^3.1.1",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/ios": "^3.1.1",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic/cli": "^6.16.3",
    "@ionic/vue": "^5.6.11",
    "@ionic/vue-router": "^5.6.11",
    "axios": "^0.21.1",
    "body-parser": "^1.19.0",
    "core-js": "^3.6.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "mongoose": "^5.13.2",
    "ts-loader": "^9.2.3",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  "devDependencies": {
    "@capacitor/cli": "^3.1.1",
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "^3.9.10",
    "vue-jest": "^5.0.0-0"
  "description": "An Ionic project"


        <ion-title>Tab 1</ion-title>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
          <ion-title size="large">Tab 1</ion-title>
      <ExploreContainer name="Tab 1 page" />
      <ion-button ion-button (click)="FirstTest();">
        Right Icon
    <ion-icon slot="end" name="star"></ion-icon>

<script lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import { defineComponent } from 'vue';
export default {
  name: 'Tab1',
  components: { IonButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
import { FitstTest } from '../api/mongodbapi';


   function FitstTest(){

export { FitstTest };

It would be highly appreciated if you can let me know where I’m doing wrong.

this wasn’t vue framework do. Please see more about the vue framework working. You are making angular code not vue.

Yes, the place you circled is not the syntax of vue, I use the syntax provided by the ionic framework.
The link I refer to is:

This is the content in the document:
<button ion-button (click)=“logEvent($event)”>
Click me!

But in the end, I used vue to solve this problem, thank you for your attention

Those are the Ionic Framework v3 docs. Please refer to this link for the latest Ionic Framework documentation: ion-button: Ionic Framework API Docs

Thanks for the reply, I finally solved this problem in other ways