Лучший способ связать jquery с vue шаблонами с помощью V-if Div - PullRequest
0 голосов
/ 21 апреля 2020

Новый для 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?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...