A-Frame+Vue: 无法绑定 a-box 的 "visible" 属性

Question

我想看看 A-Frame 和 Vue 可以多么轻松地协同工作。我在 google 搜索中遇到的例子之一是 fiddle: https://jsfiddle.net/baruog/23sdtzgx/

但我不喜欢这样的事实，即要更改示例中 a-box 的属性，需要访问 DOM 的函数。例如，在这个函数中：

setBoxColor: function(color) {
      document.querySelector('a-box').setAttribute('color', color)
    },

所以，我想知道，我可以绑定 a-box 的属性并在不访问 DOM 的情况下更改它们吗？

然后我像另一个 fiddle 一样更改了代码：https://jsfiddle.net/fy83wr49/ 我在下面复制：

HTML

<div id="vue-app"> 
  <a-scene embedded>
    <a-sky color="#000"></a-sky>
    <a-entity camera look-controls wasd-controls position="0 1 3" rotation="-15 0 0"></a-entity>
    <a-box v-bind:color="color_box" v-bind:opacity="op_box" v-bind:visible="v_box"></a-box>
  </a-scene>
  <p>Click a button to change the color of the box</p>
  <div>
    <button @click="setBoxColor('red')">Red</button>
    <button @click="setBoxColor('blue')">Blue</button>
    <button @click="setBoxColor('green')">Green</button>
    <button @click="setVisibility(true)">True</button>
    <button @click="setVisibility(false)">Flase</button>
    <button @click="changeOpacity()">Opacity</button>

  </div>
</div>

和JS

Vue.config.ignoredElements = ['a-scene', 'a-sky'];

var colorButtons = new Vue({
  el: '#vue-app',
  data: {
    color_box: "magenta",
    v_box: false,
    op_box: 0.5,
  },
  methods: {
    setBoxColor: function(color) {
      this.color_box = color;
    },
    setVisibility: function(isVisible) {
      this.v_box = isVisible;
      //document.querySelector('a-box').setAttribute('visible', isVisible)
    },
    changeOpacity: function() {
      this.op_box += 0.1;
      if (this.op_box > 1.0) this.op_box = 0.0;
    }
  }
})

发生的情况是 "color" 绑定和 "opacity" 绑定都能正常工作，但 "visible" 绑定不能。

最初我认为绑定可能只适用于标准 html 属性，它与 a-box 的 "color" 属性一起使用只是名称引起的巧合碰撞。但是后来我检查了这里的 html 属性列表 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes 并且 "opacity" 没有列出，所以我不得不放弃那个解释。

有谁知道只有前两个绑定有效的原因吗？

Answer 1

根据 a-frame 文档：https://aframe.io/docs/0.8.0/components/visible.html#updating-visible - 似乎 visible 是一个特殊属性，需要在元素上使用 object3D 或 setAttribute 进行更新.实际上他们称它为 'component' 可见 - 而不是属性，而不透明度和颜色似乎只是一个属性。简单的 vue 绑定似乎不适用于 'visible component'.

A-Frame+Vue: 无法绑定 a-box 的 "visible" 属性

A-Frame+Vue: can't bind "visible" attribute of a a-box

vue.js

aframe