Vue FullPage.js 改变方法的选项

Question

Alvarotrigo 使用 VueFullPage.js 我为我的项目创建了一个创建侧面板的方法。我正在尝试在调用该方法时更改 FullPage.js 的选项。我不知道如何从 'methods' 部分引用 'options'。

我尝试过的事情：

我尝试使用 'this' 来引用该选项，但我认为我使用的 'this' 不正确。
$refs.fullpage.api.setAllowScrolling(假); （错误：“$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

我能够通过方法解决我的问题。我通过 v-on:click 事件添加了方法更改。似乎实现了我的意图。

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

Answer 2

你检查过 vue-fullpage 文档中提供的 the codepen 了吗？

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

Vue FullPage.js 改变方法的选项

Vue FullPage.js changing Options on method

javascript

fullpage.js

vue.js