Блог

Главная - Вопросы по программированию - Как я могу использовать sortBy()

Как я могу использовать sortBy()

#arrays #vue.js #sorting

#массивы #vue.js #сортировка

Вопрос:

У меня есть этот код. Мне нужно отсортировать массив mices по весу, но у меня это не работает.Как я могу перенести функцию sortBy в шаблон, чтобы массив сортировался по весу — от малого к большому или в обратном порядке. Где я ошибся? Это работает только тогда, когда я использую непосредственно массив mices.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<!DOCTYPE html>
    <html>
    <head>
    <title>Mice Finder</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous"></head>
    <body>
    <div id="app">
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
    var app = new Vue({
        el: "#app",
        data: {
            mices: [{
                id: 9,
                name: "Logitech G Pro Wireless",
                size: "M",
                image: "assets/images/mice_id1.png",
                shape: "Ambidextrous",
                weight: 80,
                mode: "Wireless",
                description: "None"
            },
            {
                id: 2,
                name: "Razer Viper Ultimate",
                size: "M",
                image: "assets/images/mice_id2.png",
                shape: "Ambidextrous",
                weight: 74,
                mode: "Wireless",
                description: "None"
            },
            {
                id: 3,
                name: "Razer Viper Mini",
                size: "S",
                image: "assets/images/mice_id3.png",
                shape: "Ambidextrous",
                weight: 60,
                mode: "Wired",
                description: "None"
            },
            {
                id: 4,
                name: "Cooler Master MM710",
                size: "S",
                image: "assets/images/mice_id4.png",
                shape: "Ambidextrous",
                weight: 54,
                mode: "Wired",
                description: "None"
            },
            {
                id: 7,
                name: "Glorious Model O",
                size: "M",
                image: "assets/images/mice_id5.png",
                shape: "Ambidextrous",
                weight: 68,
                mode: "Wired",
                description: "None"
            }],
        },
        computed: {
                byweight: function () {
                    return _.sortBy(this.mices, 'weight')
                }
                },
        template: `<ul>
                    <span v-for="mice in byweight" style="padding: 3px;">
                        <p><div class="card" style="width: 18rem;">
                        <img class="card-img-top" v-bind:src="mice.image" alt="Card image cap">
                        <div class="card-body">
                            <h5 class="card-title">{{mice.name}}</h5>
                            <p class="card-text">Mode: {{mice.mode}}. {{mice.size}}-size. {{mice.shape}}. Weight: {{mice.weight}}.</p>
                            <p class="card-text">{{mice.description}}</p>
                            <a href="#" class="btn btn-primary">Buy this mice</a>
                        </div>
                        </div>
                    </span>
                </ul>`,
    
    
    });
    </script>
    
    <style>
    ul {
        display: flex;
        padding: 5px;
    }
    </style>
    
    </body>
    </html>

У меня есть этот код. Мне нужно отсортировать массив mices по весу, но у меня это не работает.Как я могу перенести функцию sortBy в шаблон, чтобы массив сортировался по весу — от малого к большому или в обратном порядке. Где я ошибся? Это работает только тогда, когда я использую непосредственно массив mices.

Ответ №1:

Используете ли вы Underscore.js ? Если нет, у вас нет доступной функции _sortBy. Вы могли бы просто использовать функцию сортировки. Для возрастания:

  computed: {
                byweight: function () {
                    return this.mices.sort((a,b)=>
                      {return a.weight - b.weight });
                }
        },