Новый для vue, и довольно слабый в front-end dev. Я пытаюсь создать простое приложение для карт оценок, и когда v-if изменяет div, отображаемый на странице, jquery не привязывается к новым элементам. Например, в шаблоне у меня есть что-то вроде:
<div v-if="get_game_state() === 'NEW'">
<h3>Select Number of Players</h3>
<button id='one_player' class="btn btn-success">1</button>
<button id='two_players' class="btn btn-success">2</button>
<button id='three_players' class="btn btn-success">3</button>
<button id='four_players' class="btn btn-success">4</button>
<button id='five_players' class="btn btn-success">5</button>
<button id='six_players' class="btn btn-success">6</button>
</div>
<div v-else-if="get_game_state() === 'PLAYER_SETUP'">
<div v-for="index in number_of_players" :key="index">
Enter Player {{ index }}'s Name:
<input type="text" :id='player_id(index)'>
</div>
<button id="test_submit_names" class="btn btn-success">Submit</button>
</div>
Так что, когда состояние игры меняется, игроки могут вводить свои имена, однако кнопка отправки не работает, так как метод нажатия кнопки отправки настраивается в * смонтированная vue фаза представления.
mounted() {
var ref = this;
$('#one_player').click(function() {
ref.number_of_players = 1;
ref.game_state = "PLAYER_SETUP";
});
...
$('#test_submit_names').click(function() {
//alert(ref.number_of_players);
//for (i = 0; i < ref.number_of_players; i++) {
// ref.players[i] = $('#player_'+ i).val();
// }
ref.game_state = "GAME_SELECTION";
});
...
},
Каков наилучший способ обработки чего-то подобного. Должен ли я загружать все в шаблон и использовать скрытые / show вместо vue v-if операторов? Или как вы справляетесь с динамическими c vue элементами с jquery?