How can I display function content in vue?

Question

I want to display the method contents in my template. I used a computed prop to show it, but I get function () { [native code] } instead of the actual source code.

Here's the component:

<template>
    <div>{{ showFunction }}</div>
</template>

<script>
export default {
    computed: {
        showFunction() {
            return this.confirm.toString();
        }
    },
    methods: {
        confirm() {
            let a = "1";
            return a;
        }
    }
};
</script>

I want to get the method contents (ie, let a = "1"; return a; ), but I get function () { [native code] } . How can I get the full function contents?

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString

If the toString() method is called on built-in function objects or a function created by Function.prototype.bind, toString() returns a native function string which looks like

"function () {\n    [native code]\n}"

Do you have somewhere in your code:

this.confirm = this.confirm.bind(this);

You would need to store the content of the function before binding it.

let myFunction = this.confirm.toString();
this.confirm = this.confirm.bind(this);

Answer 2

Vue compiles the method definition into Function instances, which don't expose their source code as strings. And this.METHODNAME gets the compiled Function instance.

However, you could access the original method definition through this.$options.methods.METHODNAME :

new Vue({
  computed: {
    showFunction() {
      return this.$options.methods.confirm 👈
    }
  },
  methods: {
    confirm() {/*...*/}
  }
})

demo