Laravel项目中Vue.js自定义实例属性__调用时报未定义错误求助

问题根源 #

你将__方法挂载到了Vue.prototype原型上，该方法仅属于Vue实例的属性，只能通过实例上下文的this.__方式调用。你在组件data配置中直接写__('text.save')时，JS会去全局作用域查找__方法，而你没有将该方法暴露到全局，自然会报未定义的错误。

解决方案 #

有两种常用方案可选，按需选择即可：

方案1：调整调用写法（推荐） #

所有在组件script代码中调用该方法的位置，加上this.前缀即可，因为script部分不会自动绑定Vue实例上下文：

data(){
    return {
        query: '',
        results: [],
        categoryText: this.__('text.save'), // 新增this前缀
        categoryId: 0
    }
}

补充：如果是在Vue的<template>模板中调用，可以直接写{{ __('text.save') }}，模板渲染时会自动绑定实例上下文，不需要加this。

方案2：全局暴露方法，对齐Laravel blade用法 #

如果希望完全和blade模板的调用方式一致，script中也不需要加this，可以在app.js中额外将__方法挂载到window全局对象上：

// app.js中修改原有配置
import _ from 'lodash'
const translate = str => _.get(window.i18n, str)
window.Vue.prototype.__ = translate
window.__ = translate // 新增这一行，暴露到全局

调整后你原来的组件代码不需要做任何修改即可正常运行。

额外注意项 #

你的代码中还有一处隐性问题：categoryChange方法的参数是e，但你后续获取id时用了全局的event对象，部分浏览器不支持全局event对象，建议统一修改为：

categoryChange(e) {
    this.categoryText = e.target.text;
    var id = e.target.getAttribute('data-category-id'); // 把event改成e
    this.categoryId = id;
}

内容的提问来源于stack exchange，提问作者Мирослав Пейчев