如何在 Vuejs 中加载 Pixi 实例? [英] How to load a Pixi instance in Vuejs?
问题描述
我正在按照 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 tutorial and I the console shows this error :
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
<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 实例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
