Javascript A框架&x2B；vuejs-核心：架构：警告组件/系统“未定义”的未知属性“颜色”+；10毫秒aframe.js:327

我正试图让Aframe和vuejs彼此良好地工作，但是控制台会返回警告消息。我猜这是因为在vue有机会更改属性值之前对属性值进行了一帧检查

警告消息

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

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

代码如下：

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>

<template lang="html">
    <a-box :color="color" :position="position"></a-box>
</template>

<script>
export default {
    props: ['color','position'],
}
</script>

---

设置更简单的工作代码：
（vuejs 2.4.4+框架0.6.1）

html:

我一直在寻找同一问题的答案，我在GitHub上玩了这个游戏

我错过的部分是

Vue.config.ignoredElements=[
“a-scene”，
“a实体”，
“a-camera”，
“a-box”
]

我对Vue有点陌生，我不知道
Vue.config.ignoredElements
存在。我将其添加到main.js中，并添加了我正在使用的所有aframe原语。
您需要简化事情。如果你遵循接吻原则，你可以让Vue和A-Frame很好地工作，然后从那里开始构建：谢谢你的评论@Thragio，非常感谢。你说得对，我可以把事情简化一点。我注意到你的小提琴实际上直接改变了DOM。这与Vue的精神背道而驰，因为它应该是您更改的数据，而不是dom。无论如何，我会简化我的设置，看看会发生什么。不用担心@jammer，我接受你关于直接操作DOM的观点。我认为如果没有某种连接这两者的序列化层，就不可能通过Vue直接操作A-Frame实体。查看凯文的《一帧反应》

中的一个例子：嘿@jammer，为了好玩和好奇，我尝试渲染一个a帧场景。这至少证明（对我来说）他们可以合作。我看到了与您类似的错误，直到我将整个

a-scene

包含在

脚本

块中。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

<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>

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)
  }
})