无法在 Vue.js（laravel 项目）中创建新的实例属性

Question

我正在尝试创建本地化属性，例如 Laravel 刀片模板中的 __('text')。 我创建了一个全局窗口变量，它包含所有需要的数据，名称为 window.i18n

这是我的resourses/js/app.js 文件：

require('./bootstrap');

window.Vue = require('vue');

// Here I tried to create new Instance properties
import _ from 'lodash'
window.Vue.prototype.__ = str => _.get(window.i18n, str)

Vue.component('autocomplete',require('./components/SearchComponent.vue').default);

const app = new Vue({
    el: '#app',
});

还有我的/components/SearchComponent.vue 文件，只有脚本部分：

<script>
 export default{
    props: [
        'categories'
    ],
    data(){
        return {
            query: '',
            results: [],
            categoryText: __('text.save'), // Here I tried to use __() property
            categoryId: 0
        }
    },
    methods: {
    autoComplete() {
        this.results = [];
        if(this.query.length > 2){
            axios.get('/posts/search',{params: {query: this.query, category_id: this.categoryId}}).then(response => {
                this.results = response.data;
                this.categoryText = "Избери";
                this.categoryId = 0;
            });
        }
    },
    categoryChange(e) {
        this.categoryText = e.target.text;
        var id = event.target.getAttribute('data-category-id');
        this.categoryId = id;
    },
    mounted: function () {
        console.log(this.categories);
    }
    }
 }
</script>

我收到了这个错误：

app.js:38639 [Vue 警告]：data() 中的错误：“ReferenceError: __ is not 定义”

无法处理我缺少的东西。

Answer 1

您已将__ 添加到Vue.prototype，使其成为实例属性。要访问实例属性，请在 data() 中使用 this：

export default {
  data() {
    return {         ?
      categoryText: this.__('text.save')
    }
  }
}

或者，您可以通过将__ 直接附加到window 来将其设为全局，这将使您当前的代码能够工作：

window.__ = str => _.get(window.i18n, str)