@IcheleaLposted at 2020-10-07

Vuejsでv-forのループが1回も行われない

Q&A

Closed

解決したいこと

ここに解決したい内容を記載してください。
Vue.jsのチュートリアルとして
Vue-cliでカレンダーのWebアプリを作成しております。
現在、指定回数をループさせるコンポーネントを作成しようとしております。

https://qrunch.net/@rokujiro/entries/ylmWdFAZsaAtMTpq
こちら記事の指定した回数ループさせるを参考にしたところ
Elements in iteration expect to have 'v-bind:key' directivesが発生してキー属性を指定する必要があることが分かり、下記のようなコードを作成しましたが、今度は1度もループが行われていませんでした。

実際のコード

呼び出し側から年を取得し-30年まで表示しようとしています。

<template>
<div>
  <p>{{this.nowYear}}</p>
  <ul>
    <li v-for=" year in years" :key="year.id">
      {{ year }}
      <p>ああ</p>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  // Options / Data
  data() {
    return {
      loop: 30,
      years: []
    }
  },
  methods: {
    window: onload = function() {
      for (let i = 0; i <= this.loop; i++) {
        this.years.push(this.nowYear);
        this.nowYear--;
      }
    }
  },
  props: {
    nowYear: Number,
  }
}
</script>

1Answer

@harmless_3d6 posted at 2020-10-07

「years無いよ、year.idなんて無いよ」と言われてるかもしれません。
たぶんここあたりが問題？

  methods: {
    window: onload = function() {
      for (let i = 0; i <= this.loop; i++) {
        this.years.push(this.nowYear);
        this.nowYear--;
      }
    }
  },

動くかは未検証ですが、ざくっと書いてみます。

const LOOP_MAX = 30;

export default {
  props: {
    nowYear: Number,
  },
  computed: {
    years () {
      const counts = [...Array(LOOP_MAX +1).keys()];
      return counts.map(count => {
        return {
          id : count +1,
          value : this.nowYear - count
        }
      });
    }
  }
}

0Like

Comments

@IcheleaL
Questioner
ご回答ありがとうございます。
他言語のforeachのようにyearsのリストからインデックス順にyearに入っていくものだと思っていたのですが違うのですね。

あとこちらのyears()はv-for側で呼びだせるのでしょうか？
試しに
data() {
return {
year: years()
}
}
を定義して<li v-for="(id,value) in year" :key="id">にしてみたのですが、
yearsが定義されていないのエラーメッセージが表示されてしまいます。
基礎的なことだと思うのですが調べても分かりませんでした・・・
@harmless_3d6
computedで設定されたyears()は、そのままyearsで使えます。
今回setterを準備していないので、
「呼び出しのみで使えるdata」みたいに捉えていただければ。

https://jp.vuejs.org/v2/guide/computed.html

なので、上記コメントのdataの記述を抜いた上で、再度お試しください。
<li v-for="(year, key) in years" :key="year.id">
{{ year.value }}
</li>
@IcheleaL
Questioner
いただいた
<li v-for="(year, key) in years" :key="year.id">
{{ year.value }}
</li>
だと、countsが1から30表示されてしまったので、
<li v-for="(year) in years" :key="year.id">
{{ year.value }}
</li>

こちらに変更したところやりたかった2020～1990まで表示させることができました。

v-forには単一内容を入れる変数名 in 配列名
keyには単一変数のインデックス番号相当のプロパティを
設定するという考えた方であっていますでしょうか？
@harmless_3d6
動作おめでとうございます。

v-for、v-keyは自分もその認識です。
今日これ関連でわかりやすい記事ありましたので最後にリンクしときますね。
https://qiita.com/shin_moto/items/85dd2ed2f7341592da73
@IcheleaL
Questioner
ありがとうございます。
とても参考になりました。

最後の記事は、今回知りたかった情報が乗っているようなので保存させていただきました。

Are you sure you want to delete the question?