Aframe + vuejs - core:schema:warn Unknown property `color` for component/system `undefined`. +10ms aframe.js:327
Question
I'm trying to get Aframe and vuejs to work well with each other, however the console is returning warning messages. I'm guessing this is due to aframe checking the attribute values before vue gets a chance to change them.
Warning messages
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
Here is the code:
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)
})
2 answers
solution1
0 2017-09-20 11:06:56
working code with simpler setup:
( vuejs 2.4.4 + aframe 0.6.1 )
https://jsfiddle.net/jg6uhh21/
html:
<a-scene id="app">
<test-component v-for="block in blocks" :color="block.color" :position="block.pos"></test-component>
<a-entity position="0 0 10" camera look-controls></a-entity>
</a-scene>
javascript:
Vue.component('test-component', {
props: ['color','position'],
template: `<a-box :color="color" :position="position"></a-box>`
})
new Vue({
el: '#app',
data(){
return {
blocks: [
{color: 'red', pos: "1 0 0"},
{color: 'orange', pos: "2 0 0"},
{color: 'yellow', pos: "3 0 0"}
]
}
},
mounted(){
setTimeout(() => {
this.blocks.push({color: 'lime', pos: "4 0 0"})
}, 1000)
setTimeout(() =>{
this.blocks[3].pos = "5 0 0"
}, 2000)
}
})
small interactive demo I build combining vue.js and aframe in the same way:
https://rawgit.com/frederic-schwarz/aframe-vuejs-3dio/master/index.html https://github.com/frederic-schwarz/aframe-vuejs-3dio/blob/master/index.html
solution2
0 2020-04-18 20:51:25
I was looking for an answer to this same issue and I game across this demo on GitHub
The part that I was missing was
Vue.config.ignoredElements = [
'a-scene',
'a-entity',
'a-camera',
'a-box'
]
I'm a little new to Vue and I had no idea that Vue.config.ignoredElements existed. I added this to my main.js and added all the aframe primitives that I'm using.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.