Сортировка и по убыванию, и по возрастанию в зависимости от значения true или false VUE JS

111

02 января 2020, 16:40

Нужно в зависимости от того, какой флаг у чекбокса true или false, сортировать массив по возрастанию числа и наоборот

Помогите пожалуйста с функцией...Сейчас так:

new Vue({ 
    el: '.movieApp', 
    data: { 
        randomMovie: null, 
        randomMovieDescription: null, 
        movies: [ 
            { 
                film: "AMOVIE", 
                year: 2012 
            }, 
            { 
                film: "CMOVIE", 
                year: 2018 
            }, 
            { 
                film: "BMOVIE", 
                year: 2009, 
            }], 
        search: '', 
        sortByYear: false 
        }, 
         
        methods: { 
        sortDate: function () { 
            this.sortByYear = !this.sortByYear 
            this.movies.sort(function(a, b) {  
                if (this.sortByYear = true) { 
                    return b.year - a.year  
                } if (this.sortByYear = false) { 
                    return a.year - b.year 
                } 
            }) 
        } 
        },

 <input  
                        class="list__movieList__seenAndSort  
                        list__movieList__seenAndSort__sort"  
                        type='checkbox' 
                        id='sortByYear'  
                        v-on:click="sortDate()" 
                        v-model="sortByYear" 
                    > 
                    <label for='sortByYear'> Отсортировать по году</label>

но работает функция в одну сторону...При клике на чекбокс (когда чекбокс принимает значение true), массив сортируется по убыванию...Когда чекбокс принимает противоположное значение, массив не сортирутеся по возрастанию, как ожидалось...

Что я делаю не так?

Answer 1

Изменение переменной this.sortByYear = !this.sortByYear; мешало нормальной работе. Вы же v-model для этой цели использовали :)

new Vue({ 
    el: '#movieApp', 
    data: { 
        randomMovie: null, 
        randomMovieDescription: null, 
        movies: [ 
            { 
                film: "AMOVIE", 
                year: 2012 
            }, 
            { 
                film: "CMOVIE", 
                year: 2018 
            }, 
            { 
                film: "BMOVIE", 
                year: 2009, 
            }], 
        search: '', 
        sortByYear: false 
    }, 
         
    methods: { 
        sortDate() { 
             
            this.movies.sort((a, b) => {  
                if (this.sortByYear) { 
                    return b.year - a.year  
                } else { 
                    return a.year - b.year 
                } 
            }); 
             
             
        } 
    }, 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="movieApp"> 
 <input 
type='checkbox' 
@change="sortDate" 
v-model="sortByYear"> 
<label for='sortByYear'> Отсортировать по году</label> 
<p v-for="(item, index) of movies" :key="index">{{item.year}}</p> 
</div>