Vue.js 调用数据中的方法

Question

我是 vue.js 的新手，我想在数据中调用一个方法，如下所示：

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

以及我导入到 main.js 中的 vue mixin

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

但这不起作用，我不能在数据中调用capitalizeFirstLetter 。 是否可以在数据中调用方法？

Answer 1

你需要使用this

title: this.capitalizeFirstLetter('title'),

Answer 2

请确保您已使用组件中的 mixin property在组件中注册了mixin 。

之后，您可以使用this.capitalizeFirstLetter访问 mixin 中定义的capitalizeFirstLetter方法

工作小提琴

 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>