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.

为什么在我的Vue文件的模板中无法访问addToBookmarksKey，这是一种简单的工作方式？我需要在许多Vue文件中使用addToBookmarksKey，无论是在模板还是在JavaScript块中？

谢谢！

Answer 1

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

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

您还可以通过直接在main.js中的mixin中添加函数来全局定义它：

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

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

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

1 个答案: