I am attempting to develop a localization property similar to __('text') in Laravel blade template.
I have set up a global window variable that contains all required data under the name window.i18n
Below is my resourses/js/app.js file:
require('./bootstrap');
window.Vue = require('vue');
// I am trying to create new instance properties here
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',
});
Here is the script part of my /components/SearchComponent.vue file:
<script>
export default{
props: [
'categories'
],
data(){
return {
query: '',
results: [],
categoryText: __('text.save'), // Trying to use __() property here
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>
The error message I encountered is:
app.js:38639 [Vue warn]: Error in data(): "ReferenceError: __ is not defined"
Can't figure out what I might be missing.