<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>

each block is 1 el-container there is such an array

 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 } ] },

how to make sorting by date? what would be the most recent was higher ...

  • Terrible date storage format - Alexander Zaytsev
  • @AlexanderZaytsev and what not terrible?) Tell me how easy it is to do) - Dune Konaren

2 answers 2

date

It’s impossible to parse your date and do something with it using methods built into js

 new Date('15.09.2018') // Invalid Date

I can suggest storing a date by calling Date.now() number of milliseconds since 1970. You can .sort() sort the array using the .sort() method and .sort() convert it to any output format on the page.

 // Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π΄Π°Ρ‚Ρ‹ var date = Date.now() // 1537043086974 // Π Π°Π±ΠΎΡ‚Π° с Π΄Π°Ρ‚ΠΎΠΉ Intl.DateTimeFormat('ru').format(1537043086974) // "15.09.2018"

Links Intl.DateTimeFormat () and Date.prototype.toLocaleString ()

Sort + filter

 <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>

  • I corrected the date, added the method, but it works incorrectly for some reason - Dune Konaren
  • what exactly? sorting? - Alexander Zaytsev
  • Yes, I add sorting, blocks are duplicated. sortedArray: function() { function compare(a, b) { if (a.date - b.date) return 1; return 0; } return this.picture.data.sort(compare); } sortedArray: function() { function compare(a, b) { if (a.date - b.date) return 1; return 0; } return this.picture.data.sort(compare); } add it like this v-for="array in sortedArray" back el-container - Dune Konaren
  • @DuneKonaren updated the example this morning, look - Alexander Zaytsev

Translate to UNIX-time. Well, there is a quadratic or any other sort, depending on the amount of data and sophistication.

  • I fixed the date, now how to do the sorting? I added a sorting method, but somehow it works incorrectly for me - Dune Konaren