LoginSignup
IcheleaL
@IcheleaL

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

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

Q&AClosed
Vue.jsvue-cli

解決したいこと

ここに解決したい内容を記載してください。
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>
0

1Answer

harmless_3d6
@harmless_3d6

「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
        }
      });
    }
  }
}
0

Comments

  1. @IcheleaL

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

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

  2. @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>

  3. @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には単一変数のインデックス番号相当のプロパティを
    設定するという考えた方であっていますでしょうか？

  5. @IcheleaL

    Questioner
    ありがとうございます。
    とても参考になりました。

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

Your answer might help someone💌

LoginSign Up

Popular Questions