How To Use Moment.js In Vuecli

I have npm installed vue-moment. I need to pass date to p tag via for loop. Also I need to create a method where i can add number of days to my date so that it will shoe the date a

Solution 1:

Install the moment library:

cd my-vue-cli-project
npm install moment

Load it in your main.js file:

Vue.use(require("moment"));

Test it in your components/HelloWorld.vue file:

<template><div>
    {{ today }}
  </div></template><script>import * as moment from"moment/moment";
exportdefault {
data: function () {
    return {
      today: moment()
    }
  }
}
</script>

Solution 2:

Vue-moment is Just a set of usefull Vue filters for everyday Moment functions.

The "mistake" you are doing here is that at-least for Vue 2.0, filters only work in mustache tags and v-bind, not v-html.

In order to accomplish what you are trying to achieve here, you would want to separate the scripting and markup. You can do this in two ways, as I display in your modified code below:

1. Split up the string so you can execute the JavaScript and then convert it back to a string: "<p>"+ 5*5 +"</p>"

2. You can also as you tried, use a function to do the job (as you did in changeDate)

   • I modified your function a bit. Moment defaults to today's date, so no need to get new Date()

Vue.use(vueMoment.install);

newVue({
  el: '#app',
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>" + moment().format('MM.DD.YY') + "</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  components: {},

  methods: {
    changeDate: function() {
      const todayDate = moment().format("YYYY-MM-DD");
      this.printdata[0].name = todayDate;
    }
  },
  created() {
    this.changeDate();
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue-moment@4.0.0/dist/vue-moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><divid="app"><div><div><span>{{ new Date() | moment("MM.DD.YY") }}</span></div><pv-for="data in printdata":key="data.index"v-html="data.name"></p></div></div>

Solution 3:

I got to know where I was wrong. I had not imported moment in the script tag of component. I had to do this

<script>import * as moment from"moment/moment";
exportdefault {
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>{{ new Date() | moment('MM.DD.YY') }}</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  methods: {
    changeDate: function() {
      var todaydate = newDate();
      moment(todaydate).format("YYYY-MM-DD");
      this.printdata[0].name = todaydate;
    }
  },
  created() {
    this.changeDate();
  }
};
</script>

and now its working fine.