A-Frame+Vue：无法绑定 a-box 的“可见”属性答案

【问题标题】：A-Frame+Vue: can't bind "visible" attribute of a a-boxA-Frame+Vue：无法绑定 a-box 的“可见”属性
【发布时间】：2019-06-07 06:39:12
【问题描述】：

我想看看 A-Frame 和 Vue 可以如何轻松地协同工作。我在谷歌搜索中遇到的一个例子是这个小提琴：https://jsfiddle.net/baruog/23sdtzgx/

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

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

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

我像在另一个小提琴中一样更改了代码：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;
    }
  }
})

发生的情况是“颜色”绑定和“不透明度”绑定都正常工作，但“可见”绑定不能。

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

有人知道只有前两个绑定起作用的原因吗？

【问题讨论】：

标签： vue.js aframe

【解决方案1】：

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

【讨论】：