2
私はAframeとvuejsがうまく動作するようにしようとしていますが、コンソールは警告メッセージを返しています。私はこれを推測しているのは、vueが属性値を変更する前に属性値をチェックするためです。Aframe + vuejs - core：schema：warnコンポーネント/システム `undefined`の不明なプロパティ` color`です。 + 10ms aframe.js：327
警告メッセージ
core:schema:warn Unknown property `color` for component/system `undefined`. +349ms 2aframe.js:327
core:schema:warn Unknown property `color` for component/system `undefined`. +2ms aframe.js:327
core:schema:warn Unknown property `color` for component/system `undefined`. +1ms aframe.js:327
core:schema:warn Unknown property `height` for component/system `undefined`. +1ms aframe.js:327
core:schema:warn Unknown property `color` for component/system `undefined`. +1s aframe.js:327
ここではコードです：
App.vue
<template>
<a-scene>
<test-component v-for="block in blocks" :color="block.color" :position="block.pos"></test-component>
<a-box :color="color" height="4"></a-box>
<a-entity position="0 0 10" camera look-controls></a-entity>
</a-scene>
</template>
<script>
import TestComponent from './TestComponent.vue';
require('aframe');
export default {
name: 'app',
components:{
TestComponent,
},
data(){
return {
color: 'green',
blocks: [
{color: 'red', pos: "1 0 0"},
{color: 'orange', pos: "2 0 0"},
{color: 'yellow', pos: "3 0 0"}
]
}
},
mounted(){
//test to see if a-frame updates properly
let that = this;
setTimeout(function(){
that.blocks.push({color: 'lime', pos: "4 0 0"})
}, 1000)
setTimeout(function(){
that.blocks[3].pos = "5 0 0"
}, 2000)
}
}
</script>
TestComponent.vue
は簡単なセットアップと<template lang="html">
<a-box :color="color" :position="position"></a-box>
</template>
<script>
export default {
props: ['color','position'],
}
</script>
index.htmlを
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aframetest</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
あなたは簡素化する必要がありますもの。 KISSの原則に従うと、VueとA-Frameがうまく動作します。https://jsfiddle.net/thoragio/br67aL5a/ – thoragio
コメントいただきありがとうございます。大変感謝しています。あなたはちょっと単純化することができる良い点があります。 あなたのフィドルが実際にDOMを直接変更していますが、私は注意しました。このようなことは、あなたがドームを変えないというデータでなければならないという点で、Vueの精神に反するものです。 決して私の設定を少し簡略化し、何が起こるか見ることはありません。 – Jammer
@jammerの心配はありません。私はDOMの直接操作についてあなたの意見を取ります。 Vueを介して直接Aフレームエンティティを操作することは可能ではないと思います。例については、Kevinの 'aframe-react'を参照してください：https://github.com/ngokevin/aframe-react – thoragio