Как сделать фильтр в template?

Question

[myskypesla]

Есть такой код:

<template>
  <ul>
    <li v-for="item in items">
      <span>{{ item.date }}</span>
    </li>
  </ul>
</template>

И в результате приходит такой форматы даты:
2018-10-26T20:00:00

А нужен такой формат:
26.10.2018

Вопрос: как переделать формат и убрать лишнее?

Answer 1

[Антон Антон]

С помощью moment.js: https://codepen.io/anon/pen/aKgLXP
Единственное, если собираете с помощью webpack, то нужно удалить ненужные локали из сборки, иначе очень жирно все будет. Примерно так:

const webpack = require('webpack');
....
module.exports = {
  ...,
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ru/),
  ],
...
}

Answer 2

[Владимир Проскурин]

Вычисляемое свойство или директивы https://ru.vuejs.org/v2/guide/custom-directive.html
Вот такая фигатень получится https://jsfiddle.net/h17at2jf/

Answer 3

[Argumentus]

Совет по вычисляемым свойствам отстой, используй https://ru.vuejs.org/v2/guide/filters.html

Comments

[myskypesla]

Дело, как раз не в фильтре, а в коде, который обрезает данные, которые прилетают.

[markmariner]

myskypesla, что вы имеете ввиду?

[myskypesla]

markmariner, я имею ввиду код, который переформатирует дату. Собственно в топике все написано

[Антон Антон]

markmariner, кто-то просто не умеет в js, даже в .substr() в простейшем случае. Ну или в алгоритмы. Для комплексного решения с датами есть момент.жс, см. мой ответ с готовым решением.

[Argumentus]

Используй фильтр во вью, а уже в самом фильтре используй momentjs.com для вывода даты, какой тебе нужно