前提・実現したいこと

●使用しているフレームワーク
vue.js 2.5.x
axios

apiで吐き出されましたjsonのデータを算出プロパティを使って加工したいと思ってます。
ですが、createdのfor文で目的とするjson情報が取得できず、困っております。

下記にソースを示します。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Document</title>
6<link rel="stylesheet" href="/css/style.css">
7<script src="https://unpkg.com/vue/dist/vue.js"></script>
8<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
9</head>
10<body>
11  
12<div id="wrapper">
13
14  <!-- <p><input v-model="msg"></p> -->
15  <div class="contents">
16    <transition name="fade" mode="out-in">
17  <div class="page page--home">
18    <h2>ここはホームです、一覧表示させます。{{ msg }}。<h2>
19      <ul>
20        <li v-for="post in posts">
21            {{ kakou_pos[0] }}
22            {{post.title.rendered}}
23            <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
24        </li>
25    </ul>
26  </div>
27    </transition>
28  </div><!--//contents -->
29</div><!--//wrapper -->
30
31</body>
32</html>

js
1var app = new Vue({
2  el:'#wrapper',
3  data: {
4    msg:'メッセ',
5    kakou_posts:[],
6    posts: []
7  },
8  created: function(){
9    this.getPosts();
10  },
11  methods: {
12    getPosts: function(){
13      axios.get( 'http://example.com/wp-json/wp/v2/news/?_embed&per_page=7' )
14      .then( response => {
15        this.posts = response.data;
16      } )
17      .catch( error => {
18        window.alert( error );
19      } );
20    },
21  },
22  computed:{
23    //console.log(posts.length())
24    kakou_pos: function () {
25      for(var i = 0; i < this.posts.length; i++ ){
26        return this.kakou_posts[i] = this.posts[i].date
27      }
28    }
29  }
30})

試したこと

for文をかいてjsonの配列情報を入れようと思いましたが、上手く行きませんでした。
{{ kakou_pos[0] }}の箇所がありますが、
やはり表示されません。

デバックモードを見たら配列に入っていない模様でした。
一番最初の「date」だけがセットされているだけ。なぜでしょうか？？？

最終的にやりたいこと

上記は吐き出しているjson情報（情報は一部）です。

配列からdate情報だけを受け取りまして、
date情報を出力しやすいように下記のように加工

var date = new Date(this.posts[i].date);
yy = date.getFullYear(date);
mm = date.getMonth() + 1;
dd = date.getDate();

そしてkakou_posts:[]に格納する。

イテレート文で出力する。
htmlに出力する。出力場所は{{post.title.rendered}}後ろに出力したい

が目的とする状態です。

vue.jsとjavascriptに詳しい方がいらっしゃいましたらご教示お願い致します。

解決したソース

computedのメソッドkakou_postsのreturn文の記述を修正しました。
補足説明として、getPostsは非同期処理でjson情報を取得します。取得完了後にdataのpostsに格納されます。

その後computedのkakou_postsがリアクティブ（この場合はpostsが空からjson情報がセットされたということ）を感知して、kakou_posが発動します。

javascript
1var app = new Vue({
2  el:'#wrapper',
3  data() {
4    return {
5      msg: "メッセ",
6      posts: []
7    };
8  },
9  created: function() {
10    this.getPosts();
11  },
12  methods: {
13    getPosts: function() {
14      axios
15        .get(
16          "https://cooperativehouse.jp/wp-json/wp/v2/news/?_embed&per_page=7"
17        )
18        .then(response => {
19          this.posts = response.data;
20        })
21        .catch(error => {
22          window.alert(error);
23        });
24    }
25  },
26  computed: {
27    //console.log(posts.length())
28    kakou_posts: function() {
29      const kakou_posts = [];
30      for (var i = 0; i < this.posts.length; i++) {
31        let date = this.posts[i].date;
32        kakou_posts.push(date);
33      }
34      return kakou_posts;
35    }
36  }
37})

html
1<div id="wrapper">
2
3  <div class="contents">
4    <transition name="fade" mode="out-in">
5  <div class="page page--home">
6    <h2>ここはホームです、一覧表示させます。{{ msg }}。</h2>
7      <ul>
8        <li v-for="(post,index) in posts" :key="index">
9            <h3><a :href="post.link" target="_blank">{{post.title.rendered}}</a></h3>
10            <p><time>{{ kakou_posts[index] }}</time></p>
11            <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url">
12            <hr>
13        </li>
14    </ul>
15  </div>
16    </transition>
17  </div><!--//contents -->
18
19</div><!--//wrapper -->

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

回答2件

ベストアンサー

こんにちは。
私もあまり詳しくないので、検討違いかもしれませんが、

一番最初の「date」だけがセットされているだけ。なぜでしょうか？？？

の原因はcomputedのkakou_posをreturnしてるからじゃないでしょうか。

javascript
1computed:{
2    //console.log(posts.length())
3    kakou_pos: function () {
4      for(var i = 0; i < this.posts.length; i++ ){ // ここでpostsに値が入ってても
5        return this.kakou_posts[i] = this.posts[i].date // 1ループ目でreturnするので1行目しか入ってない
6      }
7    }
8}

{{ kakou_pos }} はthis.kakou_posts[i]に代入した結果をreturnしてるので、期待した値は出力されないと思います。

kakou_postsとkakou_posの使用目的が理解できないので正しくないかもしれませんが、

javascript
1computed:{
2    kakou_pos: function () {
3      for(var i = 0; i < this.posts.length; i++ ){
4        this.kakou_posts[i] = this.posts[i].date;
5      }
6      return this.kakou_posts;
7    }
8}

としたら{{ kakou_pos[0] }} でkakou_postsの0番目の内容が出るんじゃないでしょうか。
※試してないので間違ってるかもしれません。

ただ、kakou_postsの中身がcreateの時にpostsを取得した時にしか変わらないのであれば、
kakou_postsに代入する処理をgetPostsのthenの中に書いて、出力は{{ this.kakou_posts[0] }}でいいような気もします。

投稿2018/02/22 02:26

SystemAjisai

総合スコア171

holic

2018/02/22 06:31 編集

naga3様、SystemAjisai様ご指摘ありあがとうございます。私のjavascript記述ミスとthenメソッドの知識不足でございました。 .thenのところに for(var i = 0; i < this.posts.length; i++ ){ this.kakou_posts[i] = this.posts[i].date } return this.kakou_posts で data情報を格納することができました。取得した日付情報を加工してから、kakou_postsをreturnしたいです。ここでもハマっております。さらに下のようにはできないのでしょうか。 for(var i = 0; i < this.posts.length; i++ ){ this.kakou_posts[i].moto = this.posts[i].date this.kakou_posts[i].setting = new Date(this.kakou_posts[i].moto); this.kakou_posts[i].yy = this.kakou_posts[i].setting.getFullYear(); this.kakou_posts[i].mm = this.kakou_posts[i].setting.getMonth() + 1; this.kakou_posts[i].dd = this.kakou_posts[i].setting.getDate(); } return this.kakou_posts ※現在は「TypeError: Cannot set property 'moto' of undefined」とエラーを吐いてしまいます。

SystemAjisai

2018/02/22 06:50

ちょっとでも参考になってよかったです。問題のエラーですが、kakou_postsはその時点でlength=0の中身空っぽ配列のはずなので、いきなりkakou_posts[i]とアクセスしてもundefinedになるんじゃないでしょうか。 dataでkakou_postsは配列だと認識してくれているはずなので、配列に追加（pushとか）をしてみたら行ける気がします。ただ、その書き方だとkakou_posts[i]の中身はオブジェクトを想定されていると思うのですが、Vueのオブジェクトの監視は最初にプロパティを書いておかないと認識してくれなかったと思います。 createdで作成されたオブジェクトの場合どうなるのか、やったことがないのでよくわからないのですが、一度↓の「配列の変化を検出」「オブジェクトの変更検出の注意」の辺りを読まれておいた方がいいかもしれません。 https://jp.vuejs.org/v2/guide/list.html

holic

2018/02/22 08:07

SystemAjisai様ご返答ありがとうございます。ちょっとテストに時間がかかりそうですが、テストしましたら、またご連絡いたします。しばしお時間を下さい。

holic

2018/02/23 04:23

SystemAjisai様 >>私もあまり詳しくないので、検討違いかもしれませんがいえいえ大変的確なご指示で上手く解決できました。わかりやすい説明で本当に嬉しい限りです。解決ソースを上に記します。本当に有難うございます。フォローさせていただきます。

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