Vuejs2 使事件处理程序成为我需要的可访问方法

在laravel 5.7/vue 2.5.17/vuex^3.1.0中，我在容器文件MainApp.vue中生成事件处理程序 活动：

   mounted() {
       bus.$on('dialog_confirmed', (paramsArray) => {
           alert( "dialog_confirmed paramsArray::"+var_dump(paramsArray) )
           if ( paramsArray.key == this.addToBookmarksKey(paramsArray.hostel_id) ) {
                this.runAddToBookmarks(paramsArray.hostel_id, paramsArray.index);
           }
           if ( paramsArray.key == this.deleteFromBookmarksKey(paramsArray.hostel_id) ) {
               this.runDeleteFromBookmarks(paramsArray.hostel_id, paramsArray.index);
            }
       })

    }, // mounted() {

其思想是必须从不同的页面调用runAddToBookmarks，我需要设置公共方法检查触发了哪个事件。 我尝试在resources/js/helpers/commonFuncs.js中添加方法：

export function addToBookmarksKey(hostel_id) {
    return 'hostels_sorted__add_to_bookmarks_'+hostel_id;
}

并在我的vue文件中使用它。比如：

...
        <template v-if="hostelsList.length">

            <template v-for="nextHostel, index in hostelsList" >
                <hostel-list-item
                        :currentLoggedUser="currentLoggedUser"
                        :nextHostel="nextHostel"
                        :index="index"
                        :hostelBookmarks="hostelBookmarks"
                        :delete_from_bookmarks_key="deleteFromBookmarksKey(nextHostel.id)"
                        :add_to_bookmarks_key="addToBookmarksKey(nextHostel.id)"
                ></hostel-list-item>
            </template>
        </template>
...


</template>

<script>
    import {bus} from '../../../app';
    import appMixin from '../../../appMixin';
    import { addToBookmarksKey } from "../../../helpers/commonFuncs";

。。。
...
从“../../../app”导入{bus}；
从“../../../appMixin”导入appMixin；
从“../../../helpers/commonFuncs”导入{AddToBookMarkKey}”；

但我得到了一个错误：

属性或方法“addToBookMarkKey”未在实例上定义，但在渲染期间被引用。

为什么在我的vue文件的模板中无法访问AddToBookMarkKey？哪种方法简单？ 我需要在许多vue文件中使用AddToBookMarkKey，包括在模板和it javascript块中

---

谢谢

您需要在组件实例中定义助手函数，以便在模板中使用它：

从“../../../helpers/commonFuncs”导入{AddToBookMarkKey}”；
导出默认值{
//...
方法：{
AddToBookMarkkey，
//...
}
}

您还可以通过直接在

main.js

中的mixin中添加函数来全局定义它：

从“Vue”导入Vue；
从“/App.vue”导入应用程序；
从“path/to/the/helpers/commonFuncs”导入{addToBookMarkKey}；
米辛({
方法：{
AddToBookMarkkey
}
})
新Vue({
渲染：h=>h（应用程序）
}).$mount（“#app”）；

---

无需以这种方式在组件中导入和定义它。

请尝试不使用大写字母A（即

AddToBookMarkKey

而不是

AddToBookMarkKey

），感谢您的关注，但这似乎是错误的原因。我的意思是，即使拼写错误，我也有错误