Vue FullPage.js更改方法的选项

Question

[通过Alvarotrigo使用VueFullPage.js我为我的项目创建了一个创建侧面板的方法。我正在尝试在调用该方法时更改FullPage.js的选项。我无法弄清楚如何从“方法”部分中引用“选项”。

我尝试过的事情：

• 我尝试使用'this'来引用该选项，但是我认为我错误地使用了'this'。
• $ refs.fullpage.api.setAllowScrolling（false）; （错误：“ $ refs”未定义）

Vue项目脚本

export default {
  components: {
    projOne,
    projTwo
  },
  data() {
    return {
      selectedComponent: "projOne",
      options: {
        css3: false,
        autoScrolling: true,
        // eslint-disable-next-line prettier/prettier
        sectionsColor: ["#666666", "#4BBFC3", "#7BAABE", "whitesmoke", "#000"],
        keyboardScrolling: true,
        navigation: true,
        navigationPosition: "right",
        navigationTooltips: ["Project 1", "Project 2", "Project 3"],
        fitToSection: true,
        continuousVertical: true,
        lazyLoading: true
      }
    };
  },
  methods: {
    openSide: () => {
      let sideNav = document.getElementById("mySidenav");
      let Projects = document.getElementById("Projects");

      sideNav.classList.add("activateSide");
      Projects.classList.add("activateProjects");

      //I'm having issue with referencing fullpage_api
      fullpage_api.setAllowScrolling(false);
      fullpage_api.setAutoScrolling(false);
    },
    closeSide: () => {
      let element = document.getElementById("mySidenav");
      let Projects = document.getElementById("Projects");

      element.classList.remove("activateSide");
      Projects.classList.remove("activateProjects");

      //I'm having issue with referencing fullpage_api
      fullpage_api.setAllowScrolling(true);
      fullpage_api.setAutoScrolling(true);
    }
  },
};

Main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import vuetify from "./plugins/vuetify";
import VueFullPage from "vue-fullpage.js";


Vue.config.productionTip = false;
Vue.use(VueFullPage);

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

Answer 1

您是否检查了vue-fullpage文档中提供的the codepen？

您可以使用this.$refs.fullpage.[METHOD]()。在代码库中，您可以看到如何在build属性上调用methods方法：this.$refs.fullpage.build()。

Answer 2

我能够用方法解决我的问题。我通过v-on：click事件添加了方法更改。似乎完成了我的打算。

<v-btn v-on:click="openSide(); 
       selectedComponent = 'projOne'; 
       $refs.fullpage.api.setAllowScrolling(false);"
>Open Project 1</v-btn>