Can I data bind a function in Vue js?-CodePudding

is it possible to data bind a function in Vue?

In the template I have something like: <title> {{nameofFunction()}}</title>

When I run it, it just says native function on the page.

Thanks.

CodePudding user response：

There is also such thing as "computed property" in Vue, designed to do exactly this:

<template>
  <div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  data:() => ({
    message: 'Hello'
  }),
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

CodePudding user response：

yes you can. Could you share how are you defining your data options?

Here I have an example that works both in Vue2 and Vue3

<template>
  <div id="app">
    <h1>{{messageHelloFn()}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageHelloFn: (name = 'Lucas') => {
        return `Hello ${name}`
      }
    };
  }
};
</script>

Live example: https://codepen.io/LucasFer/pen/abywRMW

CodePudding user response：

a.js

const func = (str) => str
export default fn

<template>
  <div id="app">
    <div v-for="item in items">
      {{ getTime(item) }}
    </div>
    <div>
      {{ fn('a') }}
    </div>
    <div>
      {{ func('b') }}
    </div>
  </div>
</template>

<script>
import func from './a.js'
export default {
  data () {
    return {
      items: ['123123', '456456'],
      fn: (str) => str
    }
  },
  methods: {
    getTime (v) {
      return v   '123'
    }
  }
};
</script>