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

Ionic Framework Ionic Vue
1

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

Package.json:

{
  "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"
}

Tab1.vue

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

<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';
</script>

mongodbapi.ts:


   function FitstTest(){
      console.log('Hello');
   }


export { FitstTest };

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

2

image
image778×374 20.7 KB

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

3

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

4

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

5

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