Обновление Dom при обмене элементами массива для визуализатора сортировки Vue.JS

Vue noob здесь, кто будет премного благодарен за любой совет.

Я пытаюсь создать базовый визуализатор алгоритма сортировки, который будет отображать массив целых чисел в виде гистограммы, и моя цель состоит в том, чтобы программа прошла этапы сравнения, изменив цвета двух сравниваемых значений перед их заменой, чтобы быть небольшой задержкой для пользователя, чтобы облегчить его понимание.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не могу обновить DOM при изменении массива. Я знаю, что у Vue есть некоторые ограничения, когда дело доходит до наблюдения за изменениями массивов при установке по индексу, поэтому я использовал мутацию сплайсинга, которая, как я понимаю, должна решить эту проблему, однако мой экран не обновляется до тех пор, пока весь массив не будет отсортирован.

Я попытался использовать функцию setTimeout, чтобы добавить задержку, если это происходило слишком быстро, чтобы я мог видеть, но, похоже, это ничего не решает.

Я попробовал это. $forceUpdate(), которое я видел в некоторых других сообщениях, но также безуспешно с этой опцией. В другом сообщении рекомендовалось изменить div, чтобы он отображался скрытым, поэтому я попытался посмотреть, добавил ли «v-if», а затем изменил значение на false, а затем обратно на true, чтобы взломать его для обновления, но тоже не повезло.

Любая помощь была бы потрясающей. Вот пример кода, который я написал.

пузырьковая сортировка () {

    var is_sorted = false;
    var counter = 0;

    while(!is_sorted){

        is_sorted = true;

        for( let i = 0; i < (this.num_list.length - 1 - counter); i++){
            this.show = false;
            this.index_compare_val_1 = this.num_list[i];
            this.index_compare_val_2 = this.num_list[i +1];
           
            // check if values need to be swapped
            if(this.num_list[i] > this.num_list[i + 1]){
               this.swapNumbersInArray(i, i+1)
               is_sorted = false;
            }
            //this.show = true
            setTimeout(this.show = true, 50)
        }
        counter =+ 1   
    }
   },
   swapNumbersInArray(index_1, index_2){
    var a = this.num_list[index_2] 
    this.num_list.splice(index_2, 1, this.num_list[index_1] );
    this.num_list.splice(index_1, 1, a );

    this.temp_list = this.num_list
    this.num_list = this.temp_list


   },

javascript arrays vue.js vue-reactivity
person Steve    schedule 02.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Решил эту проблему, переключив подход, используя обещание сна с setTimeout и сделав алгоритм сортировки асинхронным.

Теперь он выполняет анимацию алгоритма со скоростью, которая правильно визуализирует процесс сортировки.

Код ниже:

async bubbleSort(){
            console.log("Running Bubble Sort")
            var is_sorted = false;
            var counter = 0;
            while(!is_sorted){
                is_sorted = true;
                for( let i = 0; i < (this.num_list.length - 1 - counter); i++){
                    // set compared values for coloring
                    this.compare_val_1 = this.num_list[i];
                    this.compare_val_2 = this.num_list[i +1];     
                    // check if values need to be swapped
                    if(this.num_list[i] > this.num_list[i + 1]){
                        this.swapNumbersInArray(i, i+1)
                        await this.sleep(5) // short delay so user can see the animation
                        is_sorted = false;
                    }
            }
            counter =+ 1  
            }
        this.sorted = true; // changes color to finalColor
        },



   sleep(ms){
            return new Promise((resolve) => {
            setTimeout(resolve, ms);
            });
        },
person Steve    schedule 03.10.2020