javascript - How to make a list with datemarks on Vue.js? -
just have such view:
<div class="items"> <div class="datemark" data-date="1">today</div> <div class="item" data-date="1">item 1</div> <div class="item" data-date="1">item 2</div> <div class="item" data-date="1">item 3</div> <div class="datemark" data-date="2">tommorow</div> <div class="item" data-date="2">item 1</div> <div class="item" data-date="2">item 2</div> <div class="item" data-date="2">item 3</div> </div> with such data:
data = [ 1: { human: 'today', date: 1, items: [ item1: { name: 'test', date: 1 // possible here }, item2: {...}, ] }, 2: { human: 'tommorow', date: 2, items: [ item1: {...}, item2: {...}, ] } ] or can be:
data = [ item1: { name: 'test', date: 1 // possible here }, item2: { name: 'other', date: 2 // possible here }, ... ] how make works , can sorted desc/asc datemarks , 'inside' datemarks range if have different hours , minutes also?
tried v-for simple lists, how datemarks?
thanks!
you don't have this, use computed property instead, , can see used slice, it's because want copy array instead of sorting elements in place:
const app = new vue({ el: '#app', data: { order: 'asc', list: [ { name: 'item1', date: 1 // possible here }, { name: 'item2', date: 2 // possible here }, { name: 'item3', date: 3 // possible here }, { name: 'test', date: 4 // possible here }, { name: 'other', date: 5 // possible here } ] }, computed: { sortedlist() { return this.list.slice(0) .sort((a, b) => { if (this.order === 'asc') { return b.date - a.date; } return a.date - b.date; }) } }, methods: { togglesort(type){ this.order = type; } } });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <div> <button v-on:click="togglesort('asc')">asc</button> <button v-on:click="togglesort('dsc')">dsc</button> </div> <div> <div class="datemark" v-for="item in sortedlist"> <div class="item">{{item.name}}</div> </div> </div> </div>and reference, if you're doing comparison on real dates, use instead"
array.sort(function(a,b){ // turn strings dates, , subtract them // value either negative, positive, or zero. return new date(b.date) - new date(a.date); });
Comments
Post a Comment