我正在尝试列出可用的游戏手柄并在可用的游戏手柄中选择一个游戏手柄。当select this gamepad
按下按钮时,游戏手柄列表将不可见,只有选定的游戏手柄可见。
我试图这样做v-if
:
<div v-if="selectedGamepad != null">
{{selectedGamepad.axes}}
</div>
<div v-if="selectedGamepad == null">
<div class="gamepad" v-for="gamepad in gamepads">
{{gamepad.id}}
<button v-on:click="selectedGamepad = gamepad;">Select This Gamepad</button>
</div>
</div>
但是当我按下按钮时,selectedGamepad
值不会动态变化。因为当我按下按钮时,Vuejs 不会渲染gamepads loop
.
但是如果gamepads loop
可见selectedGamepad
值动态变化。(如果您删除v-if
on gamepads loop
)
我不明白为什么v-for="gamepad in gamepads"
效果selectedGamepad
。
如果我使用v-show
而不是v-if
一切正常,但我不想gamepads
在按下按钮后渲染。
您可以从此处查看完整示例:https ://jsfiddle.net/eywraw8t/518811/
我认为问题与Gamepad
对象有关。IfselectedGamepad
是一个Gamepad
对象 Vuejs 不能动态渲染。但是如果selectedGamepad
是一个array
(例如轴数组)一切正常。但我不知道如何Gamepad
正确渲染对象。