Блог

У меня установлен 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?

Установите 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>
  

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

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

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

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

«Ошибка», которую вы здесь делаете, заключается в том, что, по крайней мере, для Vue 2.0, фильтры работают только в тегах mustache и 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>