Как использовать Moment.js в vuecli
У меня установлен npm vue-moment. Мне нужно передать дату тегу p через цикл for. Также Мне нужно создать метод, где я могу добавить количество дней к моей дате, чтобы она обувала дату после этого количества дней. Как мне это сделать ИЛИ где я не прав
код main.js:
Vue.use(require("vue-moment"));
код vuecomponent:
<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?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Vue-moment — это просто набор полезных Vue фильтры для повседневных функций Moment.
"ошибка", который вы здесь делаете, это, по крайней мере, для Vue 2.0, фильтры работают только в тегах усов и v-bind, а не v-html.
Чтобы выполнить то, что вы пытаетесь достичь здесь, вам нужно разделить сценарии и разметку. Вы можете сделать это двумя способами, как показано в вашем модифицированном коде ниже:
- Разделите строку, чтобы вы могли выполнить JavaScript, а затем преобразовать ее обратно в строку:
"<p>"+ 5*5 +"</p>" Вы также можете, как вы пытались, использовать функцию для выполнения задания (как вы делали в
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/[email protected]/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>Вы ничего не сказали о том, что момент не определен в VScode. Тем не менее, это должно работать, проблема только в том, что vscode не понимает, что два файла в конце концов объединены.
Я понял решение. Мне пришлось импортировать его там, где я вызвал функцию moment().
Я понял, где я был неправ. Я не импортировал момент в тег скрипта компонента. я должен был сделать это
<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>
и теперь он работает нормально.
Установите библиотеку moment:
cd my-vue-cli-project
npm install moment
Загрузите его в свой файл main.js:
Vue.use(require("moment"));
Проверьте это в своем файле components/HelloWorld.vue:
<template>
<div>
{{ today }}
</div>
</template>
<script>
import * as moment from "moment/moment";
export default {
data: function () {
return {
today: moment()
}
}
}
</script>
Спасибо! Самый полный гайд для новичков вроде меня. Я меняю часть импорта на import moment from 'moment'. Я не совсем понимаю, почему так много вариаций/способов.
Ошибка, которую я получаю, такая же, как и раньше. В vscode видно, что момент не определен