Сделайте обработчики событий мне нужен доступный метод

Question

В 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";

Но я получил ошибку: property or method "addToBookmarksKey" is not defined on the instance but referenced during render.

Почему addToBookmarksKey недоступен в шаблоне моего vue-файла и какой простой способ это сделать?Мне нужно использовать addToBookmarksKey во многих vue-файлах, как в шаблоне, так и в блоке javascript?

Спасибо!

Answer 1

Вам нужно определить свою вспомогательную функцию внутри экземпляра компонента, чтобы использовать ее в шаблоне:

<script>
  import { addToBookmarksKey } from "../../../helpers/commonFuncs";
  export default {
    //...
    methods: {
      addToBookmarksKey,
      //...
    }
  }

Вы также можете определить ее глобально, добавив функцию в миксин непосредственно в main.js:

import Vue from "vue";
import App from "./App.vue";
import { addToBookmarksKey } from "path/to/the/helpers/commonFuncs";

Vue.mixin({
  methods: {
    addToBookmarksKey
  }
})

new Vue({
  render: h => h(App)
}).$mount("#app");

нет необходимости импортировать и определять его внутри ваших компонентов таким образом.