0

I'm trying to list available gamepads and select a gamepad in available gamepads. When select this gamepad button pressed gamepads list will be not visible and only selected gamepad will be visible.

I tried to do this with 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>

But when I press the button selectedGamepad values not change dynamically. Because when I press the button, Vuejs not render the gamepads loop.

But if gamepads loop visible selectedGamepad values changes dynamically.(if you remove v-if on gamepads loop)

I don't understand why v-for="gamepad in gamepads" effect to selectedGamepad.

If I use v-show instead of v-if everything works fine but I don't want to render gamepads after button pressed.

You can see full example from here : https://jsfiddle.net/eywraw8t/518811/

I think the problem is related to the Gamepad object. If selectedGamepad is a Gamepad object Vuejs can't render dynamically. But if selectedGamepad is a array(axes array for example) everything works fine. But i can't figure out how to render Gamepad object correctly.

Uğur Cibaroğlu
  • 33
  • 1
  • 1
  • 4
  • When I click the button, `selectedGamepad` changes from `null` to whatever `event.gamepad` is for that gamepad. Exactly as exptected, the loop disappears and I see the value of `{{selectedGamepad.axes}}` instead. What exactly is not working as intended? –  Dec 25 '18 at 13:42
  • But axis values not change when move the gamepad joysticks. Actually its change but vue not render the new values in view. – Uğur Cibaroğlu Dec 25 '18 at 14:38
  • It sounds like vue was not able to modify the object to inject it's getters/setters needed for invalidating (eg, knowing when the values have changed) – WORMSS Nov 14 '20 at 13:16
  • I just tried your demo with two Joy-Con controllers and it showed the axes (an array of four values) as expected. – DenverCoder9 Dec 16 '20 at 12:18

0 Answers0