Как сделать сортировку массива по дате?

161

28 декабря 2018, 15:30

                <el-container v-for="(domain) in picture.data" :key="domain.key">
                    <el-aside width="230px">
                        <div class="example-avatar">
                        <div v-show="$refs.upload && $refs.upload.dropActive" class="drop-active"></div>
                        <div v-for="b in domain.files" :key="b.key" class="avatar-upload" v-show="!domain.edit">
                            <div class="text-center p-2">
                                <label :for="'avatar'+b.key">
                                    <img :src="b.imgurl.length ? b.imgurl[0].url : 'https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm'" style="width:200px;height:206px;cursor:pointer;border: 1px solid lightgrey;border-radius:10px;"/>
                                </label>
                            </div>
                            <div class="text-center p-2">
                                <file-upload
                                    extensions="gif,jpg,jpeg,png,webp"
                                    accept="image/png,image/gif,image/jpeg,image/webp"
                                    :name="'avatar'+b.key"
                                    class="btn btn-primary"
                                    post-action="/upload/post"
                                    :drop="!domain.edit"
                                    v-model="b.imgurl"
                                    @input-filter="inputFilter"
                                    ref="upload">
                                </file-upload>
                            </div>
                        </div>
                    </div>
                    </el-aside>
                    <el-container>
                        <el-header style="background-color: #e2e2e2;border-radius: 15px;text-align: center; width: 99.5%;">{{ domain.date }}
                            <el-popover
                                placement="top"
                                v-model="domain.visible">
                                <p style="text-align:center;">Вы уверены?</p>
                                <div style="text-align: center; margin: 0">
                                    <el-button size="mini" type="text" @click="domain.visible = false">нет</el-button>
                                    <el-button type="primary" size="mini" @click="removeblockpict(domain)">да</el-button>
                                </div>
                                    <el-button style="float: right;margin-top: 10px;" slot="reference" type="danger" data-tooltip="элемент" icon="el-icon-delete" circle></el-button>
                            </el-popover>
                        </el-header>
                        <el-main style="padding:0;padding-top: 24px;">
                            <el-form>
                                <el-form-item style="width:100%">
                                    <el-input v-model="domain.comment" :autosize="{ minRows: 5.3, maxRows: 5}" placeholder="Комментарий" type="textarea" style="width: 100%"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-main>
                    </el-container>
                </el-container>

каждый блок это 1 el-container есть вот такой массив

picture: {
            data: [
                {
                    key: 1,
                    files: [{imgurl:[{url:'https://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg'}], key: Math.random().toString(16).slice(2)}],
                    edit: false,
                    date: 1527022800000,
                    comment: 'Тут пришел комментарий',
                    visible: false
                },
                {
                    key: 12,
                    files: [{imgurl:[{url:'https://www.sunhome.ru/i/wallpapers/200/planeta-zemlya-kartinka.960x540.jpg'}], key: Math.random().toString(16).slice(2)}],
                    edit: false,
                    date: 1529701200000,
                    comment: 'Тут пришел комментарий',
                    visible: false
                }
            ]
        },

как сделать сортировку по дате? что бы самое свежее было выше...

Answer 1

Дата

Вашу дату невозможно пропарсить и что-то с ней сделать встроенными в js методами

new Date('15.09.2018') // Invalid Date

Могу предложить хранить дату вызовом Date.now() количество миллисекунд с 1970 года. Вы банально сможете отсортировать массив методом .sort() И преобразовать в последствии в любой формат вывода на страницу

// Создание даты
var date = Date.now() // 1537043086974
// Работа с датой
Intl.DateTimeFormat('ru').format(1537043086974) // "15.09.2018"

Ссылочки Intl.DateTimeFormat() и Date.prototype.toLocaleString()

Сортировка + фильтр

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> 
 
<ul id="app"> 
  <li v-for="t in sortDesc" :key="t"> 
    {{ t | formatDate }} 
  </li> 
</ul> 
 
<script> 
  new Vue({ 
    el: '#app', 
    data() { 
      return { 
        time: [ 
          1537043086974, 
          1536043086974, 
          1535043086974, 
          1534043086974, 
          1533043086974, 
        ] 
      }; 
    }, 
    computed: { 
      sortDesc() { 
        return this.time.sort((a, b) => b - a); 
      } 
    }, 
    filters: { 
      formatDate(date) { 
        return Intl.DateTimeFormat('ru').format(date); 
      } 
    } 
  }); 
</script>