Как использовать Moment.js в vuecli - PullRequest
Новая
       14

Как использовать Moment.js в vuecli

2 голосов
/ 21 апреля 2019

У меня установлен vpm-момент npm. Мне нужно передать дату в тег p через цикл. Также Мне нужно создать метод , в котором я могу добавить количество дней к моей дате, чтобы оно совпадало с датой после этого количества дней. Как мне это сделать ИЛИ где я не прав

код main.js: 

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

код компонента: 

<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"
        }
      ]
    };
  },
  components: {},

  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>

Один из тегов div работает как положено, но как мне получить дату во втором теге p?

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Я узнал, где я был не прав.Я не импортировал момент в теге script компонента.Я должен был сделать это 

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

, и теперь он работает нормально.

0 голосов
/ 21 апреля 2019

Vue-moment - это просто набор полезных Vue фильтров для повседневных функций Moment.

«ошибка» , которую вы здесь делаете, заключается в том, что по крайней мере для Vue 2.0 фильтры работают только с усами и v-bind , а не с v-html.

Чтобы выполнить то, что вы пытаетесь достичь здесь, вам нужно разделить сценарии и разметку. Вы можете сделать это двумя способами, как показано в вашем измененном коде ниже:

  1. Разделите строку, чтобы можно было выполнить JavaScript, а затем преобразовать ее обратно в строку: "<p>"+ 5*5 +"</p>"

  2. Вы также можете использовать функцию для выполнения работы (как вы это делали в changeDate)

    • Я немного изменил вашу функцию. Момент по умолчанию соответствует сегодняшней дате, поэтому нет необходимости получать 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"
        }
      ]
    };
  },
  components: {},

  methods: {
    changeDate: function() {
      const todayDate = moment().format("YYYY-MM-DD");
      this.printdata[0].name = todayDate;
    }
  },
  created() {
    this.changeDate();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-moment@4.0.0/dist/vue-moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>
...