3
votes

Comment utiliser Moment.js dans vue cli

J'ai installé npm vue-moment. Je dois passer la date à la balise p via la boucle for. J'ai besoin de créer une méthode dans laquelle je peux ajouter un nombre de jours à ma date afin qu'elle pique la date après ce nombre de jours. Comment faire OU où je me trompe

code main.js:

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

vuecomponent code:

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

Celui de la balise div fonctionne comme prévu, mais comment obtenir la date dans la deuxième balise p?

javascript vue.js vue-cli momentjs

0 commentaires

3 Réponses :

0
votes

Vue-moment n'est qu'un ensemble de filtres Vue utiles pour les fonctions Moment quotidiennes .

L ' "erreur" que vous faites ici est qu'au moins pour Vue 2.0, les filtres ne fonctionnent que dans les balises moustache et v-bind , pas dans v-html.

Afin d'accomplir ce que vous essayez d'accomplir ici, vous voudrait séparer le script et le balisage. Vous pouvez le faire de deux manières, comme je l’affiche dans votre code modifié ci-dessous:

Divisez la chaîne pour pouvoir exécuter le JavaScript, puis la reconvertir en chaîne: "" + 5 * 5 + " "
Vous pouvez également, comme vous l'avez essayé, utiliser une fonction pour faire le travail (comme vous l'avez fait dans changeDate )
- J'ai un peu modifié votre fonction. Moment est défini par défaut sur la date du jour, il n'est donc pas nécessaire d'obtenir la nouvelle date ()

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

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();
  }
});

3 commentaires

L'erreur que j'obtiens est la même que précédemment. Il montre dans vscode que le moment n'est pas défini

Vous n'avez rien dit à propos du moment non défini dans VScode. Cependant, cela devrait fonctionner, le problème est seulement que vscode ne comprend pas que les deux fichiers sont cheminés ensemble à la fin

J'ai trouvé la solution. J'ai dû l'importer là où j'avais appelé la fonction moment ().

0
votes

J'ai appris où je m'étais trompé. Je n'avais pas importé de moment dans la balise script du composant. Je devais faire ça

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

et maintenant ça marche très bien.

0 commentaires

2
votes

Installez la bibliothèque moment :

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

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

Chargez-la dans votre fichier main.js :

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

Testez-le dans votre fichier components / HelloWorld.vue :

cd my-vue-cli-project
npm install moment

1 commentaires

Je vous remercie! Le guide le plus complet pour les débutants comme moi. Je change la partie d'importation en moment d'importation à partir de «moment» . Je ne comprends pas très bien pourquoi il y a tant de variantes / façons.