javascript vue.js ボタンで表示を変えるシステム

Question

イメージ・・・
現在：国語　9：00～10：00　当番：森本　田中
次の予定：算数　11：00～12：00　当番：松本　中村
【ボタン】
ボタン押下↓
現在：算数　11：00～12：00　当番：松本　中村
次の予定：理科　13：00～14：00　当番：山下　青山
【ボタン】

data: function() {
　return {
     today_schedule: [
       { id:'1', plan: '国語', start: '9:00', end: '10:00', name: [ '森本','田中'], },
       { id:'2', plan: '算数', start: '11:00', end: '12:00', name: [ '松本', '中村' ], },
       { id:'3', plan: '理科', start: '13:00', end: '14:00', name: [ '山下', '青山' ], },
i: -1,
peplename: '',

というシステムを作成しているのですが、次の予定がなくなった時（ループが終わるとき）

現在：理科　13：00～14：00　当番：山下　青山
次の予定：（空白もしくは"次の予定はありません"）
【ボタン】
ボタン押下↓
「今日の予定は全て終了しました」
という風にしたいです。

methods: {
 clickButton: function(event) {　　　　　
    this.i = this.i+1
    if(this.i == this.today_schedule.length-1){
       this.today_schedule.push('次の予定はありません');
    }
},
　　if(this.i == this.today_schedule.length){
       this.todayend=true;
},

<p v-show="todayend">今日の予定は全て終了しました</p>

と、してみたのですが、次の予定に「次の予定はありません」とは入らず
「undefined」と入ってしまいます。

this.today_schedule[this.i].start + '～' + this.today_schedule[this.i].end;

上記のような文で現在：にデータをいれており、次の予定はi+1しているので、
エラーになるのではないかと思ってはいるのですが、どこを変えるとうまくいくのか、そもそもこのやり方があっているのかわかりません。

よろしくお願いいたします。

Answer 1

単純に文字列を入れてそれを出すようにすればいい気がしますがどうですか
（配列に入れる必要があるのかわからないので）

data: function() {
　return {
    message: '', // 追加
}

if(this.i == this.today_schedule.length-1){
  this.message = '次の予定はありません';
}

Comments

[meronpansuki]

お返事ありがとうございます。
早速試してみたのですが、やはり同じ結果でした。
他の部分の文章が変なのでしょうか

[sola-msr]

配列を比較するところがおかしい気がします
this.i = this.i+1を書く前に
if (Object.keys(this.today_schedule).length == 0)
の判定をするように書き換えてみてはどうですか？

this.iっていらない気がします

[meronpansuki]

初心者ですみません。
私的にはthis.iを+1して次のデータを表示するというイメージで、
this.iがいらないというのにピンとこないのですが、
if (Object.keys(this.today_schedule).length == 0)はどういった処理になるのでしょうか。

[sola-msr]

データ自体はサーバー側から取得してthis.today_scheduleに入れる想定ですよね？
単純にとってきたデータがあるかないかを配列の長さをみて判定してます
if (Object.keys(this.today_schedule).length == 0)

v-forを使えば配列のkeyを使えるので自分でiを定義しなくても大丈夫かなと

[meronpansuki]

なるほど、、
そんな風にもできるのですね。
ありがとうございます。