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 after that number of days. How do i do it OR where am I wrong

main.js code:

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

vueponent code:

<template>
  <div>
    <div>
      <span>{{ new Date() | moment("MM.DD.YY") }}</span>
    </div>
    <p v-for="data in printdata" :key="data.index" v-html="data.name"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>{{ new Date() | moment('MM.DD.YY') }}</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  ponents: {},

  methods: {
    changeDate: function() {
      var todaydate = new Date();
      moment(todaydate).format("YYYY-MM-DD");
      this.printdata[0].name = todaydate;
    }
  },
  created() {
    this.changeDate();
  }
};
</script>

<style lang="scss" scoped></style>

The one in div tag is working as expected but how do i get date in second p tag?

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 after that number of days. How do i do it OR where am I wrong

main.js code:

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

vueponent code:

<template>
  <div>
    <div>
      <span>{{ new Date() | moment("MM.DD.YY") }}</span>
    </div>
    <p v-for="data in printdata" :key="data.index" v-html="data.name"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      printdata: [
        {
          name: "paraone"
        },
        {
          name: "<span>{{ new Date() | moment('MM.DD.YY') }}</span>"
        },
        {
          name: "parathree"
        },
        {
          name: "parafour"
        }
      ]
    };
  },
  ponents: {},

  methods: {
    changeDate: function() {
      var todaydate = new Date();
      moment(todaydate).format("YYYY-MM-DD");
      this.printdata[0].name = todaydate;
    }
  },
  created() {
    this.changeDate();
  }
};
</script>

<style lang="scss" scoped></style>

The one in div tag is working as expected but how do i get date in second p tag?

• javascript
• vue.js
• momentjs
• vue-cli

3 Answers 3

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 ponents/HelloWorld.vue file:

<template>
  <div>
    {{ today }}
  </div>
</template>

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

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

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

and now its working fine.

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 acplish 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);

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

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

<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue-moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div>
      <span>{{ new Date() | moment("MM.DD.YY") }}</span>
    </div>
    <p v-for="data in printdata" :key="data.index" v-html="data.name"></p>
  </div>
</div>