Vue.js call method in the data

Question

I am new to vue.js and I want to call a method in the data so something like this:

data() {
        return {
            title: capitalizeFirstLetter('title'),
        };
    },

and my vue mixin which I imported to my main.js

Vue.mixin({
  methods: {
    capitalizeFirstLetter(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }    
  }
})

but this doesnt work, I cant call capitalizeFirstLetter in the data. Is it possible to call a method in data?

Nitheesh · Accepted Answer · 2021-10-29 14:50:00Z

2

Please ensure that you have registered the mixin in the component using mixin property in component.

After that you can access capitalizeFirstLetter method defined inside the mixin using this.capitalizeFirstLetter

Working fiddle

const myMixin = {
  methods: {
    capitalizeFirstLetter(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    }
  }
}

new Vue({
  el: "#app",
  mixins: [myMixin],
  data() {
    return {
      title: this.capitalizeFirstLetter('title'),
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ title }}
</div>

answered Oct 29, 2021 at 14:50

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikola Pavicevic · Accepted Answer · 2021-10-29 14:44:59Z

1

You need to use this

title: this.capitalizeFirstLetter('title'),

answered Oct 29, 2021 at 14:44

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Collectives™ on Stack Overflow

Vue.js call method in the data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related