Как исправить «TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_8 __. CreateCanvas не является функцией» при попытке использовать p5.js внутри вложенного компонента vue? - PullRequest
Новая
       4

Как исправить «TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_8 __. CreateCanvas не является функцией» при попытке использовать p5.js внутри вложенного компонента vue?

0 голосов
/ 17 февраля 2019

В настоящее время я пытаюсь создать это приложение (https://repl.it/@prophetorpheus/collaborative-sketch) в vue.js как компонент vue моего файла App.vue.

Когда я пытаюсь вызвать функцию настройки внутри моегокомпонент vue (я назвал его Whiteboard.vue) я получаю эту ошибку: 

[Vue warn]: Error in v-on handler: "TypeError: vue_p5__WEBPACK_IMPORTED_MODULE_8__.createCanvas is not a function"

found in

---> <Whiteboard> at src/components/Whiteboard.vue
       <App> at src/App.vue
         <Root>

Я делаю что-то в корне неправильно или есть проблема из-за разницы в версиях между моим подходом и связанным приложением?

Это соответствующие части моего кода (насколько я могу судить, что они имеют отношение к проблеме: D), (я изменил данные конфигурации Firebase): 

<template>
      <div>
        <button @click="execute">hit me</button>
      </div>
    </template>



    <script>
    import Vue from "vue";
    import firebase from "firebase";
    import p5 from "p5";
    import * as vuep5 from "vue-p5";

    // Initialize Firebase
    var config = {
      apiKey: "------------",
      authDomain: "--------------",
      databaseURL: "--------------",
      projectId: "-------------",
      storageBucket: "----------------",
      messagingSenderId: "----------------"
    };
    firebase.initializeApp(config);

    var pointsData = firebase.database().ref();
    var points = [];

    function setup() {
      var canvas = vuep5.createCanvas(1500, 1500);
      vuep5.background(255);
      vuep5.fill(0);
      pointsData.on("child_added", function(point) {
        points.push(point.val());
      });
      canvas.mousePressed(drawPoint);

      canvas.mouseMoved(function() {
        if (mouseIsPressed) {
          drawPoint();
        }
      });
    }

    function draw() {
      background(255);
      for (var i = 0; i < points.length; i++) {
        var point = points[i];
        ellipse(point.x, point.y, 5, 5);
      }
    }

    function drawPoint() {
      pointsData.push({
        x: mouseX,
        y: mouseY
      });
      return false;
    }

    export default {
      name: "Whiteboard",
      data() {
        return {};
      },
      methods: {
        execute() {
          setup();
          draw();
          drawPoint();
        }
      }
    };
    </script>

Моя цель - создать работающее приложение для рисования на доске для совместной работы в режиме реального времени с vue, базой данных Firebase в реальном времени и p5. Заранее благодарны за любые предложения.

...