山田先生の学生のみ表示したい（今ほかの先生の学生も）

Question

###前提・実現したいこと
vue.jsでUI側の画面を作成中。
ログイン中の山田先生が自分の学生成績リストを表示したい。

###発生している問題・エラーメッセージ
ログイン中の山田先生以外の田中先生の学生もリストに表示されている。
ようには先生ごとに分けてもらいたい。

###該当のソースコード

          .l-item.l-item-id {{item.studentName}}

上記は学生リストをすべて表示する。山田先生の学生だけでなく、ほかの先生の学生も表示される。

  computed: {  
    studentName() {
      if (this.user.name === this.item.teacherName) {
        return "studentName"
      } else {
        return null
      }
    }

上記はログイン中の先生user.nameは指定する先生のteacherNameと同じ値であれば、その先生の学生リストstudentNameを返してくれる

上記の図はuser.nameが未定義だが、本当に未定義のせいなのか？
###試したこと
今はログイン中の先生user.nameは指定する先生のteacherNameと同じ値であれば、その先生の学生リストstudentNameを返してくれると試しているのですが、
user.nameは未定義であるか、この考え方が間違えたのか分からないため、よくしくお願いします。

Answer 1

予めフィルタリングしたリストを computed で作成するか v-for 時に分岐するといいです。

computed: {
  myStudentList() {
    return this.studentList.filter(v => v.teacherName === this.user.name)
  }
}

v-if なら

<li v-for="item in studentList" v-if="item.teacherName === user.name">

先生毎のリストを1ページに表示させたい場合は、computed などであらかじめ1次元→2次元の配列を作成したり、先生の v-for の中で 生徒を v-for したらいいかと思います。

メソッドでも出来ますがデータ加工なら computed が良いんじゃないかなぁ～と思います。

methods: {
  filter(teacher) {
    return this.studentList.filter(v => v.teacherName === teacher)
  }
},

Answer 2

Vue Devtoolsを使って、どんなdataを保持しているか確認した方がいいですよ。

Comments

[soso_sho]

ご回答ありがとうございます。
dataは確認できますが、山田先生の学生さんのみ絞り込みたいのですが、他のヒントとかありますでしょうか。

[mirainonakamura]

全体のソースって見ることはできませんか??