I've defined the trigger event in google chrome extension with Vue3 like this:

<template>
  <div id="reddwarf-translate-app">
    <div id="translate-btn">
      <button type="button"  @click="translate">
        <span ></span>
      </button>
        <button v-on:click="add">Add 1</button>

    </div>
    <div id="pop-container">
      <div id="translate-panel">
        <div ></div>
        <div ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { doTranslate } from "@/public/action/TransAction";
import { MessageType } from "@/model/message/MessageType";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    word: String,
  },
  setup(props) {
    if (props && props.word && props.word.trim().length > 0) {
      
    }
  },
  methods:{
    translate(){
      alert("do translate");
      const transWord = computed(() => getters["Trans/getTransWord"])
      if (transWord && transWord.value && transWord.value.trim().length > 0) {
        doTranslate(transWord.value.trim(),MessageType.SELECTION_TRANSLATE);
      }
    },
    add(){
      alert("do add");
    }
  }
});
</script>

When I clicked the two type of button, both did not trigger events(both function did not show alert message), why did this happened? Am I missing something? what should I do to make the trigger events work? I've tried to make a minimal example with the same code block, it works fine. I think maybe it's the google chrome extension environment problem. I've loaded this component in google chrome extension v3 script like this:

export async function addTransShowElement(translation:string){
  let anchorElementId = "uniq-anchor-point";
  let anchorElement = document.getElementById(anchorElementId);
  if (anchorElement == null || anchorElement === undefined) {
    let reddwarfTranslateDiv = document.createElement("div");
    reddwarfTranslateDiv.id = anchorElementId;
    document.body.appendChild(reddwarfTranslateDiv);
  }
  let appElement = document.getElementById("reddwarf-translate-app");
  if (appElement == null || appElement === undefined) {
    let props = {
      word: translation.toString().trim(),
    };
    const app = createApp(TranslatorPop, props);
    app.use(store);
    let vm = app.mount("#uniq-anchor-point");
    document.body.appendChild(vm.$el);
  }
}

TranslatorPop was the component I am defined. I have tried another way like this:

setup(props) {
    const add = () => {
      alert("do add");
    }
    
    return(
      add
    );
  },

This way it works fine. Why put the function setup works but in methods did not work?

CodePudding user response：

You are mixing Options API (methods) and Composition API (setup), stick to one that suits your need. In Composition API you define the methods in the setup as you did in the last code snippet and this is how it works. If you want to use Options API, don't define setup, but data and methods:
https://v3.vuejs.org/guide/composition-api-introduction.html#basics-of-composition-api
vs.
https://v3.vuejs.org/guide/data-methods.html#data-properties