如何在 Vuejs 中加载 Pixi 实例? | Pixi

Pixi

关注(28)粉丝(399)

如何在 Vuejs 中加载 Pixi 实例?

本文介绍了如何在 Vuejs 中加载 Pixi 实例?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在按照 Pixi 教程在 VueJS 组件中学习 PixiJS我控制台显示此错误:

vue.runtime.esm.js?2b0e:619 [Vue 警告]:渲染错误:TypeError:将循环结构转换为 JSON

<div>{{ displayPixi() }}

</模板><脚本>从 'pixi.js' 导入 * 作为 PIXI导出默认{name: 'HelloWorld',方法: {displayPixi() {返回新的 PIXI.Application({width: 256, height: 256})}}}

你如何在 VueJS 中加载 Pixi 实例?

解决方案

好吧，您真正需要做的是按照您提供的教程进行操作.

如您所见，创建应用程序后，您需要将其视图附加到某物上.

作为那个教程中报道的例子document.body.appendChild(app.view);

以Vue"方式为例，您可以在数据中定义

data(){返回 {应用程序:新应用程序(...)}

并且在您安装的挂钩中，您可以

 挂载(){this.$el.appendChild(this.app.view)}

这只是一个例子，按照我在挂载钩子中所说的去做这不是最好的解决方案，因为如果有条件渲染它会触发，但它会起到作用.

I am learning PixiJS inside a VueJS component following the Pixi tutorialand I the console shows this error :

<template>
  <div>
    {{ displayPixi() }}
  </div>
</template>

<script>
  import * as PIXI from 'pixi.js'

  export default {
    name: 'HelloWorld',

    methods: {
      displayPixi() {
        return new PIXI.Application({width: 256, height: 256})
      }
    }
  }
</script>

How do you load Pixi instances in VueJS ?

解决方案

Well, what you really need to do is following the tutorial you have provided.

As you can see, after the application is been created, you need to attach its view to something.

As an example reported in that tutorial document.body.appendChild(app.view);

In a "Vue" way an example could be that in the data you can define

data(){
 return {
   app: new Application(...)
 }

and in your mounted hook you can

 mounted(){
   this.$el.appendChild(this.app.view)
 }

This is just an example, doing what i said in the mounted hook it's not the best solution cause it will fire if there is a conditional rendering, but it will serve the cause.

这篇关于如何在 Vuejs 中加载 Pixi 实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-19 01:38