CODEWITHSUNDEEP
vue.js
ahzep
ahzep

Reputation: 180

Vue computed property for showing the date

I want the site to show todays date in the intro page. With vanilla JS is a breeze but with vue is way more harder, I can't make it work and I have no idea what I'm doing wrong. I'm using vue CLI here's the code:

HTML

<template>
    <div class ="date">
      Today is {{ date[0] }} of {{ date[1]}}
    </div>
</template>

JS

export default {
  data:function(){
    return{
      date:[]
    }
  },
  computed:{
    getTodaysDate(){
    var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]

    var todaysDate = new Date();

    this.date[0] = days[todaysDate.getDay() -1];
    this.date[1] = months[todaysDate.getMonth() +1]

    return this.date
    }
  }
}

Upvotes: 0

Views: 2989

Answers (1)

skirtle
skirtle

Reputation: 29112

Retaining the array-based date and template from the question, it could be implemented something like this:

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

new Vue({
  el: '#app',

  data () {
    const todaysDate = new Date()
    const day = days[todaysDate.getDay()]
    const month = months[todaysDate.getMonth()]

    return {
      date: [day, month]
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class ="date">
    Today is {{ date[0] }} of {{ date[1] }}
  </div>
</div>

There's no need for a computed property here, we can just populate the values in data.

Computed properties should not have side effects, so setting this.date inside a computed property would be considered incorrect usage. If you wanted to use a computed property you'd just return the relevant value and use it directly in the template.

It might look something like this:

const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

new Vue({
  el: '#app',

  computed: {
    date () {
      const todaysDate = new Date()
      const day = days[todaysDate.getDay()]
      const month = months[todaysDate.getMonth()]

      return [day, month]
    }
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div class ="date">
    Today is {{ date[0] }} of {{ date[1] }}
  </div>
</div>

But as it isn't using any reactive data in the computation there really isn't any need to use a computed property for this.

Note I have also changed your array of days to start on Sunday so that it matches getDay(). I've also got rid of the +1/-1 stuff as that would give the wrong values.

Upvotes: 1

Related Questions