Question

我目前正在尝试在vue.js中创建此应用（https://repl.it/@prophetorpheus/collaborative-sketch）作为App.vue文件的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。感谢您提前提出任何建议。

尝试在嵌套vue组件中使用p5.js时，如何解决“ TypeError：vue_p5__WEBPACK_IMPORTED_MODULE_8 __。createCanvas不是函数”的问题？

0 个答案: