moment.jsで、作成日を取得できない

vueでTODOアプリを作っています。
TODOを追加したときに、moment.jsで追加した瞬間の日付を取得したいのですが、方法が思いつきません。
Vue.jsで日付処理ライブラリMoment.jsを使う | webOpixelを参考にしていたのですが、
実際には下記のように、リアルタイムの時間しか取れません。TODO１つ１つに、created_atをつけたいのですが、どのような手順を踏めばよろしいでしょうか？

該当するコードがこちらになります。

    <p>
      <input v-model="newtodo" v-on:keyup.enter="addtodo" />
      <button @click="addtodo">Add todo</button>
    </p>
    <div v-for="todo in todos" :key="todo.id">
      <p>
        <span class="todo">{{ todo }}</span>
        <span class="todo">{{ todo.created_at | moment }}</span>
        <button @click="removetodo(todo)">Remove</button>
        <button @click="editTodo(todo)">編集</button>
      </p>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  filters: {
    moment: function(date) {
      return moment(date).format('YYYY/MM/DD HH:mm');
    },
  },
  data() {
    return {
      todos: [],
      newtodo: '',
      show: true,
      editIndex: -1,
      createflag: true,
    };

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<html>
2<head>
3  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
5</head>
6<body>
7<div id="app">
8  <div v-for="todo in todos" :key="todo.id">
9    <p>
10      <span class="todo">{{ todo }}</span>
11      <span class="todo">{{ todo.created_at | moment }}</span>
12    </p>
13  </div>
14  <div v-for="todo in todos2" :key="todo.id">
15    <p>
16      <span class="todo">{{ todo }}</span>
17      <span class="todo">{{ todo.created_at | moment }}</span>
18    </p>
19  </div>
20</div>
21</body>
22<script>
23  new Vue({
24    el: "#app",
25    filters: {
26      moment: function(date) {
27        if(date) {
28          return moment(date).format('YYYY/MM/DD HH:mm');
29        }
30        return moment().format('YYYY/MM/DD HH:mm');
31      },
32    },
33    data() {
34      return {
35        todos: [
36          { created_at: "2020-01-01 00:00:00", },
37          { created_at: "", },
38        ],
39        todos2: [
40          "a",
41          "b",
42        ],
43      };
44    },
45  });
46</script>
47</html>

で表示確認してみましたが

こうなりました。{{ todo }}においてオブジェクトならキーと値が出るのがわかりました。

質問にある画面ではキー表示がないので明らかに私が試したコードのtodo2のデータのように文字列の配列になってるのではないでしょうか？
なのでtodosの値を調べてみたらいかがでしょう。

投稿2020/05/22 08:09

編集2020/05/22 08:16

rururu3

総合スコア5545

fork_

2020/05/22 09:10

ご回答いただきありがとうございます。大変申し訳ありません、質問の仕方が良くなかったです。自分が実現したいこととしては、TODO1つ1つに、「TODOが作られた時間」を表示させたいです。今の現状ですと、ページをリロードした際に、TODO全ての時間が同じ時間になってしまうので、個別で違う時間をつけてあげたい、というところです。。

rururu3

2020/05/22 09:20

回答に書いておりますが、取得してるデータが文字列の配列になってるのではという回答しております。質問にtodosに何が入っているかが書いてませんので、質問の結果画面表示になりそうなデータで試してみての回答させていただいてます。

fork_

2020/05/22 09:29

理解が浅かったです。。申し訳ありません。いただいた回答を元に、取り組んでみます。

fork_

2020/05/22 13:08

todoを追加するメソッドに問題がありました。おっしゃる通り、文字列の配列となっていました。 ``` const tododata = { text: this.newtodo, created_at: new Date(), }; this.todos.push(tododata); ``` と、オブジェクトとして値を渡してあげることによって、解決することができました。ありがとうございました。

行動規範の内容に同意します